• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Lightbox-me : پلاگین ساده jQuery برای ساخت لایت باکس

2 2169 ۲۱ بهمن ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام Lightbox-me رو خدمت شما معرفی کنم و اونو آموزش بدم.

lightbox_me

 

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر برای سایت خودتون lightbox قرار بدین و هر المنتی در صفحه ( DOM ) رو درون اون لایت باکس جا بدین.

میبینید که هر وقت روی دکمه " نمایش لایت باکس " کلیک میکنید ، lightbox ظاهر میشه و بگکراند کل صفحه هم تغییر میکنه. با کلیک بر روی بکگراند یا دکمه " بستن " ، لایت باکس بسته خواهد شد. هر زمان لایت باکس بسته میشه ، یک پیغام هم نمایش داده میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.lightbox_me.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

میبینید که یک دکمه قرار دادیم برای باز شدن لایت باکس.

بعد از اون یک div با id = sample قرار دادیم و چیزایی که میخوایم درون لایت باکس قرار بگیرن رو در این div قرار میدیم. اولین کاری که باید بکنیم اینه که ، اون المنتی که میخواهیم بصورت lightbox درش بیاریم رو ، مخفی کنیم ، بصورت زیر :

حالا دیگه باید از پلاگین و امکانات اون استفاده کنیم. باید با استفاده از jquery مشخص کنید که طی چه شرایطی لایت باکس باز بشه. من میخوام هر زمان که روی دکمه مورد نظر کلیک شد ، باز بشه. بصورت زیر :

میبینید که مشخص کردیم هر زمان روی دکمه کلیک شد ، اون div با id = sample ، تابع lightbox_me براش اتفاق بیوفته. با اینکار کار ما تقریبا به اتمام رسیده. ولی کارای دیگه ای هم میشه انجام داد.

مثلا من میخوام کاری کنم که ، هر زمان روی دکمه " بستن " ، کلیک شد ، لایت باکس بسته بشه. بصورت زیر :

متد lightbox_me ویژگی های بسیاری داره که من مهمتریناش رو توضیح میدم :

  • overlaySpeed : مدت زمانی که بکگراند ظاهر میشه. بر حسب میلی ثانیه
  • lightboxSpeed : مدت زمانی که لایت باکس ظاهر میشه. بر حسب میلی ثانیه
  • closeClick : اگر true باشه ، با کلیک بر روی بکگراند ، لایت باکس بسته میشه
  • closeEsc : اگر true باشه ، با زدن دکمه Esc کیبورد ،  لایت باکس بسته میشه
  • showOverlay : اگر false باشه ، بکگراند ظاهر نمیشه
  • onClose : میتونین با استفاده از این ویژگی ، کدهایی رو قرار بدین که ، در زمان بسته شدن لایت باکس اجرا بشن
  • centered : اگر true باشه ، لایت باکس از نظر افقی در وسط قرار داره
  • overlayCSS : میتونین با استفاده از این ویژگی ، استایل بکگراند رو تغییر بدین ، مثلا بصورت زیر :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram