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

- visibility ۴ mode_comment

در این مطلب میخوام یک پلاگین 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 : میتونین با استفاده از این ویژگی ، استایل بکگراند رو تغییر بدین ، مثلا بصورت زیر :

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

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

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

comment دیدگاه کاربران
حامد

دمت گرم

محمد اسفندیاری

موفق باشید

hanijafari

سلام
ممنون از زحمتتون
این کد همون کدی هست که من لازم دارم ، فقط جسارتا میخوام موقع لود صفحه هر 24 ساعت یکبار برای هر آی پی باز بشه 😐
امکانش هست نحوه تغییرات برای این مورد هم بگید؟
با تشکر

محمد اسفندیاری

این درخواست رو درون انجمن مطرح کنید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.