logo logo
خوش آمدید! برای فعال سازی امکانات لطفا ورود یا ثبت نام.

توجه

Icon
Error

ساخت لایت باکس حرفه ای با css و jquery
developzoom
#1 ارسال شده : چهارشنبه، 24 اوت 2016 11:03:13 ب.ظ(UTC)
developzoom

رتبه: Member

گروه ها: Registered
تاریخ عضویت: 20/04/2016(UTC)
ارسالها: 20
IRAN (ISLAMIC REPUBLIC OF)
مکان: ایران

از سری مطالب آموزش طراحی سایت در سایت آموزش برنامه نویسی در خدمت شما هستیم.

مرحله اول: کد HTML

نرم افزار مورد علاقه خود را که در آن کد می نویسید را باز کنید من شخصا در نرم افزار Aptana کدنویسی می کنم که به شما نیز پیشنهاد میکنم از آن استفاده کنید.
کد زیر را در فایل html خود بنویسید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<title>DevelopZoom Simple LightBox</title>
</head>
<body>


<div id="wrapper">

<h1>Super Simple Lightbox</h1>



Our super simple lightbox demo. Here are the image links:

<ul>

<li>
<a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">
Picture 1
</a>
</li>


<li>
<a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">
Picture 2
</a>
</li>


<li>
<a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">
Picture 3
</a>
</li>


</ul>



</div>

<!-- #/wrapper -->
</body>
</html>
1



نکته: ما در این پروژه از کلاس lightbox_trigger در تمام لینک هایی که دارای عکس میباشند استفاده کرده ایم که در هنگام نوشتن اسکریپت کار راحتی داشته باشیم.

مرحله دوم: استایل CSS

در این مرحله استایل اولیه را در داخل تگ

در تگاضافه می کنیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
margin:0;
padding:0;
background:#efefef;
text-align:center; /* used to center div in IE */
}
#wrapper {
width:600px;
margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/
background:#fff;
text-align:left; /*resets text alignment from body tag */
border:1px solid #ccc;
border-top:none;
padding:25px;
/*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
box-shadow:0 0 5px #ccc;
-moz-box-shadow:0 0 5px #ccc;
-webkit-box-shadow:0 0 5px #ccc;
}
2



مرحله سوم: رفع مشکل وسط بودن div در Internet Explorer

ما از خاصیت margin: 0 auto; برای وسط چین کردن #wrapper استفاده کردیم که در تمام مرورگرها به جز IE به خوبی کار میکند اما راه حل برای مرورگر IE خاصیت text-align:center; می باشد.

مرحله چهارم: کد HTML برای لایت باکس

کد زیر، کد HTML لایتباکس ماست. اگرجه آن را به طور مستقیم داخل HTML خود وارد نمی کنیم و با استفاده از jquery به صورت داینامیک این کد را مینویسیم ولی دیدین و دانستن این کد به استایل دهی ما توشط css کمک شایانی میکند.

1
2
3
4
5
6
7
8
9
10
11
<div id="lightbox">


Click to close


<div id="content">
<img src="#" />
</div>

</div>
نکته: اگر دقت کنید آدرس عکس موجود در این کد خالی می باشد، زیرا آدرس با توجه به عکسی که کاربر روی آن کلیک میکند متغیر است و ما این کار را با جاوااسکریپت رفع می کنیم.

مرحله پنجم: لایه سیاه لایت باکس

در این مرحله ما یک div با شناسه #lightbox از مرحله قبل داریم که می خواهیم این div لایه سیها رنگ لایت باکس ما باشد و کل صفحه نمایش کاربر را با هر رزولوشنی که هست پوشش دهد:

1
2
3
4
5
6
7
8
9
#lightbox {
position:fixed; /* keeps the lightbox window in the current viewport */
top:0;
left:0;
width:100%;
height:100%;
background:url(overlay.png) repeat;
text-align:center;
}
3



چند نکته کاربردی:

۱- position:fixed باعث میشود لایت باکس شما در موقعیت درست در صفحه نمایش کاربر نمایش داده شود.
۲- width:100%; height:100%; باعث میشود لایت باکس شما کل صفحه کاربر را پوشش دهد.

نکته: برای جلوگیری از سردرگم شدن کاربر در لایت باکس ما کمی نوشته قرا می دهیم که نشان دهنده این موضوع است که برای خروج از لایت باکس هر جا که کاربر بخواهد میتواند کلیک کند:

1
2
3
4
5
6
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}


مرحله ششم: استایل عکس های لایت باکس


1
2
3
4
5
6
#lightbox img {
box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
max-width:940px;
}
نکته: خاصیت max-width باعث میشود ما مطمئن شویم عکس ماهمیشه کل صفحه را پوشش می دهد.

عکس زیر حالت کلی ما بعد از اضافه کردن کد HTML لایت باکس به پروژه مان است:



مرحله هفتم: بررسی منطق لایت باکس

هدف ما این است که وقتیس کاربر روی لینک با کلاس lightbox_trigger کلیک کرد:
باید بررسی شود که آیا div با کلاس lightbox در پروژه ما وجود دارد یه خیر ؟

-اگر وجود داشت باید تگ img را در داخل div با شناسه content پیدا کرد و آدرس تگ img را با آدرس لینکی که روی آن کلیک شده جایگزین کرد.
-اگر وجود نداشت باید ابتدا کد HTML لایت باکس را وارد کنید.
-و در آخر باید وقتی لایت باکس در حال نمایش است با کلیک در هر کجای صفحه لایت باکس بسته شود.

مرحله هشتم: javasacript including jquery

ابتدا کتابخانه jquery را به صفحه اضافه می کینم:

1
<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script>

مرحله نهم: اضافه کردن کد jquery به پروژه

دقیقا بعد از اضافه کردن کتابخانه jquery کد jquery خود را در داخل تگ script قرار می دهیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
jQuery(document).ready(function($) {

// Our script will go here

});
</script>

$('.lightbox_trigger').click(function(e) {

// Code that makes the lightbox appear

});
ابتدا باید با کد ()e.preventDefault مانع شویم مرورگر با کلیک روی یک لینک از صفحه خارج شود
سپس :

1
var image_href = $(this).attr("href");
با کد بالا می توانیم آدرس عکسی که قرار است نمایش داده شود را با استفاده از آدرس لینکی که روی آن کلیک می شود بگیریم.
حال منطقی که در مرحله هفتم به آن اشاره کردیم را پیاده می کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
if ($('#lightbox').length > 0) { // #lightbox exists

//insert img tag with clicked link's href as src value
$('#content').html('<img src="' + image_href + '" />');

//show lightbox window - you can use a transition here if you want, i.e. .show('fast')
$('#lightbox').show();
}
else { //#lightbox does not exist

//create HTML markup for lightbox window
var lightbox =
'
<div id="lightbox">' +
'

Click to close

' +
'
<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'</div>

' +
'</div>

';

//insert lightbox HTML into page
$('body').append(lightbox);
}

$('#lightbox').live('click', function() {
$('#lightbox').hide();
});
در این مرحله کار ما ب اتمام می رسد و کد پایانی جاوااسکریپت ما به صورت زیر می باشد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script>
jQuery(document).ready(function($) {

$('.lightbox_trigger').click(function(e) {

//prevent default action (hyperlink)
e.preventDefault();

//Get clicked link href
var image_href = $(this).attr("href");

/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked

If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/

if ($('#lightbox').length > 0) { // #lightbox exists

//place href as img src value
$('#content').html('<img src="' + image_href + '" />');

//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').show();
}

else { //#lightbox does not exist - create and insert (runs 1st time only)

//create HTML markup for lightbox window
var lightbox =
'
<div id="lightbox">' +
'

Click to close

' +
'
<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'</div>

' +
'</div>

';

//insert lightbox HTML into page
$('body').append(lightbox);
}

});

//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').hide();
});

});
</script>
نمای کلی پروژه بعد از اتمام کار:


کاربرانی که در حال مشاهده انجمن هستند
Guest
جهش به انجمن  
شما مجاز به ارسال مطلب در این انجمن نمی باشید.
شما مجاز به ارسال پاسخ در این انجمن نمی باشید.
شما مجاز به حذف مطلب ارسالی خود در این انجمن نمی باشید.
شما مجاز به ویرایش مطلب ارسالی خود در این انجمن نمی باشید.
شما مجاز به ایجاد نظر سنجی در این انجمن نمی باشید.
شما مجاز به رای دادن در این انجمن نمی باشید.