MyBB Pro

P30-ART

اعلانات انجمن(حتما مطالعه بفرمائید) :


برچسب ها: ساخت, لایت, باکس, حرفه, ای, css, jquery,

ساخت لایت باکس حرفه ای با css و jquery
زمان کنونی: ۹-۱۶-۱۳۹۵, ۰۸:۳۷ عصر
کاربران در حال بازدید این موضوع: 1 مهمان
نویسنده: developzoom
آخرین ارسال: developzoom
پاسخ: 1
بازدید: 45

ارسال موضوع ارسال پاسخ
 
رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ساخت لایت باکس حرفه ای با css و jquery
نویسنده پیام
*
آبدارچی هیئت

وضعیت : آفلاین
شماره کاربر :7350
ویترین مدال ها :0

پست‌ها: 5

اعتبار: 0
تاریخ عضویت: ارد ۱۳۹۵

حالت من: هیچ کدام

ارسال: #1
Icon13 ساخت لایت باکس حرفه ای با css و jquery
[عکس: developzoom-images-pattern1-1.png]

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

مرحله اول: کد 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

[عکس: 1.jpg]

نکته: ما در این پروژه از کلاس 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

[عکس: 2.jpg]

مرحله سوم: رفع مشکل وسط بودن 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

[عکس: 3.jpg]

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

۱- 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 لایت باکس به پروژه مان است:

[عکس: 4.jpg]

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

هدف ما این است که وقتیس کاربر روی لینک با کلاس 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>
نمای کلی پروژه بعد از اتمام کار:


[عکس: 4.jpg]

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

آموزش برنامه نویسی ,آموزش وردپرس
۶-۴-۱۳۹۵ ۱۲:۴۸ صبح
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال موضوع ارسال پاسخ

بروزرسانی موضوع (برای بروزرسانی کلیک کنید)My-BB.Ir

موضوعات مشابه ...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  نمای ساختمان یکی از مهمترین عناصر بیرونی در ساخت و ساز نمای ساختمان پوشش ساختمان یکی zahrabb 0 43 ۳-۱۱-۱۳۹۵ ۰۳:۱۴ عصر
آخرین ارسال: zahrabb
  ساخت کوچک ترین موبایل جهان با طرحی نو و جالب + عکس فاطمه زهرا 0 319 ۱۱-۲۹-۱۳۹۰ ۰۷:۱۲ عصر
آخرین ارسال: فاطمه زهرا
  ساخت اولین لب تاپ مقاوم نظامی+عکس admin 0 372 ۱-۱۵-۱۳۹۰ ۰۳:۲۸ عصر
آخرین ارسال: admin

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان

 انتخاب پوسته: