ایجاد Lightbox زیبا برای تصاویر
به همه فایلها نیاز نداریم و فقط به ۳ فایل زیر احتیاج داریم :

jquery.js
lightbox.min.js
lightbox.css

همچنین به تعدادی عکس هم برای این مطلب نیاز داریم. من فایلهای مورد نیاز رو در انتهای همین مطلب براتون قرار دادم و میتونین اونو دانلود کنید و از فایلها استفاده کنید.

در ابتدا سه پوشه با نامهای css و js و img بسازید. در پوشه js فایلهای jquery.js و lightbox.min.js رو قرار میدیم. فایل lightbox.css رو در پوشه ی css قرار بدین و چهار عکس close.png و loading.gif و prev.png و next.png رو در پوشه ی img قرار میدیم. برای مثال ما میخوایم عملیات lightbox رو بر روی سه تا عکس انجام بدیم. این عکس هارو هم در پوشه img قرار میدیم.

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

yu

همونطور که میبینید ، تمام فایلهارو به صفحمون متصل کردیم. با اضافه کردن فایل css به صفحه ، بطور اتوماتیک اون ۴ تا تصویر هم به صفحتون الصاق میشه و در مکانهای لازم از اون استفاده میشه. فقط حواستون باشه که این ۴ تا تصویر حتما باید در پوشه img باشند.

خب حالا برای اینکه یک lightbox از اون عکس بسازین ، کافیه که کد زیر رو قرار بدین :

a

میبینید که در بالا یک لینک ایجاد کردیم. خاصیت href لینک رو آدرس اون عکسی قرار میدیم که میخوایم در lightbox ظاهر بشه. با استفاده از خاصیت data-lightbox میتونین یک نام برای این lightbox انتخاب کنید. به این معنا که ، اگه این مقدار برای هر لینک متفاوت باشه ، این lightbox ها مستقل هستن و بهم ربطی ندارن و اگه بخواین تعدادی عکس رو بصورت گروهی در یک lightbox مدیریت کنید ، باید برای همه اونایی که میخواین در یک گروه باشن ، اسم یکسانی رو انتخاب کنید.

با استفاده از خاصیت data-title هم میتونین یک caption برای اون تصویر انتخاب کنید. اگر ار این خاصیت استفاده نکنید ، هیچ چیزی نمایش داده نمیشه.

اینم بگم که اگه از چنتا عکس بصورت گروهی استفاده کنید ، تقریبا بصورت یک اسلایدر در میاد و میتونین بین اون عکسا جابجا بشین.

در لینک بالا من یک نوشته قرار دادم. مثلا Image #1. میتونیم بجای متن از تصویر هم استفاده کنید.

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

road

همونطور که میبینید ، خاصیت data-lightbox برای هر سه لینک ، یکسان هست. پس یعنی در یک گروه قرار دارن. اگه کد بالا رو در خروجی ببینید ، بصورت زیر هست :

ug

حالا فرض کنید ، بر روی لینک Image #2 کلیک کنید ، lightbox بصورت زیر خواهد بود :

op
اگر بر روی این گزینه کلیک کنید ، به عکس بعد منتقل میشین.
با کلیک بر روی این گزینه ، lightbox بسته میشه.
اینجا هم میگه که این عکس ، چندمین عکس ار گروه هست.