کتابخانه
glightbox یه کتابخانه جاوااسکریپت خالص برای ساخت لایت باکسه، یعنی همون پنجره شناوری که عکس، ویدیو یا محتوای دیگه رو روی صفحه باز می کنه. به jQuery وابسته نیست، سبکه و برای گالری تصاویر، نمونه کارها و ویدیوهای سایت های وردپرسی و غیر وردپرسی به درد می خوره.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۳۳۳ کیلوبایت· ۲۶ فایل· انتشار
SHA-256: c67c59cdf980793b0216c9de9c6ebf688418838822af1e50b09439e3aa289ff3
وقتی روی یه تصویر کوچیک توی سایت کلیک می کنی و نسخه بزرگش روی یه لایه تیره باز می شه، با لایت باکس طرفی. glightbox همین کار رو با جاوااسکریپت خالص و بدون jQuery انجام می ده. تصویر، ویدیو، iframe و محتوای inline رو نشون می ده و می تونی چند مورد رو توی یه گالری جمع کنی تا کاربر با کیبورد یا کشیدن انگشت بینشون جابه جا بشه.
دلیل اصلی که خیلی ها سراغش می رن سبک بودنشه. برای راه اندازی فقط یه فایل جاوااسکریپت و یه فایل CSS لازمه. لینک هایی رو که می خوای توی لایت باکس باز بشن با کلاس glightbox علامت می زنی، کتابخانه رو یه بار راه می ندازی و تمومه. برای هر مورد می شه عنوان و توضیح گذاشت. گزینه هایی مثل حلقه ای بودن گالری، پخش خودکار ویدیو و ناوبری لمسی هم توی تنظیماتش هست.
برای کی مناسبه؟ سایت شرکتی، نمونه کار، وبلاگ یا فروشگاهی که می خواد عکس محصول رو بزرگ نشون بده. اگه قالبت لایت باکس نداره و نمی خوای فقط برای همین کار یه افزونه سنگین نصب کنی، glightbox انتخاب خوبیه. ولی یه چیز رو یادت باشه: این کتابخانه فقط پنجره نمایش رو می سازه. چیدمان گالری، فیلتر دسته بندی و صفحه بندی با خودته و باید با HTML و CSS درستشون کنی. اگه با کد کار نمی کنی و یه گالری آماده با پنل مدیریت می خوای، افزونه های گالری وردپرس راحت ترن. اگه قالب یا افزونه ای که داری از قبل لایت باکس داره، دومی رو کنارش اضافه نکن. این دو تا با هم تداخل پیدا می کنن و رفتار صفحه عجیب می شه.
یه نکته برای سایت های ایرانی: فایل های کتابخانه رو روی هاست خودت بذار و به CDN خارجی تکیه نکن. توی روزهایی که اینترنت بین الملل محدود می شه، لینک خارجی ممکنه لود نشه و گالری سایتت از کار بیفته. برای ویدیو هم همین حساب رو بکن. ویدیوی سرویس های خارجی ممکنه برای بعضی بازدیدکننده ها باز نشه. فایل ویدیویی روی هاست داخلی قابل اعتمادتره، به شرطی که حجمش رو کنترل کنی. توی سایت های راست چین هم ظاهر دکمه ها و جای توضیحات رو تست کن، چون ممکنه به یه کم CSS اضافه نیاز داشته باشه.
glightbox ساخته Biati Digital و با مجوز MIT منتشر شده، پس استفاده تجاری ازش آزاده. نسخه های رسمی و بدون تغییرش توی مخزن داخلی ما هم هست. اگه دسترسی به منبع اصلی مشکل داشت، می تونی از همین جا دانلودش کنی.
راه اندازی glightbox سه چهار قدم بیشتر نیست و کد آماده اش پایین همین صفحه هست.
توی وردپرس بهتره فایل ها رو با wp_enqueue_style و wp_enqueue_script از طریق قالب فرزند یا یه افزونه کوچیک خودت اضافه کنی و کد راه اندازی رو بعد از لود اسکریپت بذاری. بعد از تست، کش سایت رو خالی کن تا تغییرها دیده بشه.
نه. glightbox با جاوااسکریپت خالص نوشته شده و به jQuery یا کتابخانه دیگه ای وابسته نیست. یعنی حتی توی سایتی که jQuery لود نمی کنی هم کار می کنه. فقط فایل جاوااسکریپت و فایل CSS خودش رو به صفحه اضافه می کنی و بقیه کار با یه فراخوانی ساده انجام می شه.
بله، علاوه بر تصویر، ویدیو هم پشتیبانی می کنه، چه ویدیوی سرویس های دیگه که توی صفحه جاسازی می شه و چه فایل ویدیویی خودت. فقط یادت باشه ویدیوی سرویس های خارجی ممکنه برای بازدیدکننده ایرانی باز نشه. اگه برات مهمه، فایل ویدیو رو روی هاست خودت بذار و حجمش رو بهینه کن.
فایل های CSS و جاوااسکریپت رو با wp_enqueue_style و wp_enqueue_script توی قالب فرزند یا یه افزونه کوچیک اضافه کن. بعدش لینک عکس ها رو با کلاس glightbox علامت بزن و کد راه اندازی رو بعد از لود اسکریپت بذار. توی ویرایشگر بلوک اگه گزینه افزودن کلاس برای لینک نبود، کلاس رو توی حالت ویرایش HTML اضافه کن.
glightbox با مجوز MIT منتشر شده و استفاده توی پروژه های شخصی و تجاری آزاده. شرطش اینه که اعلان حق نشر و متن مجوز رو توی فایل ها نگه داری. برای پروژه مشتری هم می تونی ازش استفاده کنی، ولی بهتره متن مجوز رو یه بار بخونی.
معمولا یکی از این سه دلیله: فایل جاوااسکریپت لود نشده، کد راه اندازی قبل از لود کتابخانه اجرا شده، یا کلاس لینک با کلاسی که توی تنظیم داده ای یکی نیست. کنسول مرورگر رو باز کن و خطاها رو ببین. توی وردپرس هم کش و ادغام فایل ها رو چک کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.