/ ساخت لایت باکس حرفه ای با css و jquery
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 2 از 2

موضوع: ساخت لایت باکس حرفه ای با css و jquery

  1. #1
    developzoom آنلاین نیست.
    developzoom
    کاربر سايت
    16نوشته1مورد پسند

    تاریخ عضویت
    Apr 2016
    شماره عضویت
    11346
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    11
    -

    ساخت لایت باکس حرفه ای با css و jquery

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


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


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



    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


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

  2. نوين وردپرس تبلیغات شما

  3. #2
    AbovE آنلاین نیست.
    AbovE
    مدير ارشد
    962نوشته2,771مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1587
    پسندیده است
    988 پست
    بلاگ
    پست
    میزان امتیاز
    2781
    سمینار نه انجمن
    درود لطفأ پست رو ویرایش کنید و از برچسب کد برای نمایش هر چه بهتر کدها استفاده کنید .
    سپاس .

    کاربر زیر پست AbovE را پسندیده است:


    telegram.me/skintheme
    instagram.com/skintheme

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 0
    آخرين نوشته: 08-20-2016, 02:25 PM
  2. چگونه با طراحی سایت فروشگاهی به فروش خوبی دست پیدا کنیم؟
    توسط webcando در انجمن آموزش سئو و بهینه سازی
    پاسخ: 0
    آخرين نوشته: 07-11-2016, 11:07 AM
  3. پک درجات کاربری جزیره ( jazireeh ) | اختصاصی ویکی وی بی
    توسط pokernew در انجمن پک درجات کاربری
    پاسخ: 3
    آخرين نوشته: 07-03-2016, 04:11 AM

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی