کتابخانه
magnific-popup یه کتابخانه لایت باکس و پنجره مودال برای jQuery و Zepto هست. با اون می تونی تصویر، گالری عکس، HTML داخل صفحه، ویدیوی یوتیوب یا ویمیو و حتی نقشه گوگل رو توی یه پنجره شناور نشون بدی. افکت های حرکتیش با CSS3 ساخته شدن و مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۹۶۷ کیلوبایت· ۳۵ فایل· انتشار
SHA-256: 4a371e15352adec627f5d52fdbfd6d6604a68970eb7cd912bb64f78b0820fde4
وقتی کاربر روی عکس کوچیک یه محصول یا نمونه کار کلیک می کنه، انتظار داره عکس بزرگ همون جا روی صفحه باز بشه. نه اینکه بره به یه صفحه خالی و بعد مجبور بشه برگرده. magnific-popup دقیقاً برای همین کار ساخته شده. یه کتابخانه لایت باکس و مودال هست که محتوا رو روی یه پس زمینه تیره، وسط صفحه نشون می ده. مجوزش MIT هست، یعنی توی سایت شخصی و پروژه مشتری راحت می تونی ازش استفاده کنی.
کاربردش فقط عکس نیست. یه تکه HTML داخل همون صفحه رو هم می شه توی پنجره باز کرد، مثلاً فرم تماس یا فرم عضویت در خبرنامه. با iframe هم کار می کنه، پس ویدیوی یوتیوب و ویمیو یا نقشه گوگل رو هم می تونی توی همین پنجره بذاری. برای گالری، چند تصویر رو پشت هم ردیف می کنی و کاربر بینشون جابه جا می شه. انیمیشن باز و بسته شدن پنجره هم با CSS3 اجرا می شه، پس برای یه افکت ساده لازم نیست سراغ افزونه انیمیشن جدا بری.
برای کی مناسبه؟ برای سایت هایی که از قبل jQuery دارن، مثل خیلی از قالب های وردپرسی و فروشگاه های ووکامرسی. اگه یه قالب قدیمی دستت رسیده و لایت باکسش خراب یا سنگینه، این کتابخانه جایگزین ساده ای براشه. ولی اگه پروژه ات jQuery نداره و با React یا Vue نوشته شده، فقط برای یه پاپ آپ کل jQuery رو اضافه نکن. اونجا یه راه حل بومی مرورگر یا یه کتابخانه بدون وابستگی بهتره. برای پروژه جدید هم قبل از انتخاب، وضعیت نگهداری کتابخانه و سازگاریش با jQuery سایتت رو چک کن.
دو تا نکته موقع استفاده زیاد گیر می ده. اول اینکه هم فایل جاوااسکریپت لازمه و هم فایل CSS. اگه استایل رو نذاری، پنجره درست دیده نمی شه. دوم اینکه jQuery باید قبل از این کتابخانه لود بشه. اگه ویدیو یا نقشه از سرویس خارجی می آد، یادت باشه توی روزهای اینترنت ضعیف ممکنه برای کاربر ایرانی دیر باز بشه یا اصلاً باز نشه. پس عکس ها و فایل های خودت رو روی هاست داخلی نگه دار. نسخه های رسمی و بدون تغییر magnific-popup توی مخزن داخلی ما هم هست، پس وقتی دسترسی به npm یا CDN های خارجی مشکل داره، از همین جا برش دار.
نصب و راه اندازیش چند قدم بیشتر نیست:
اگه لینک ها دیرتر از خود صفحه ساخته می شن، مثلاً با ایجکس، کد فعال سازی رو بعد از ساخته شدنشون اجرا کن.
توی وردپرس بهتره فایل ها رو با wp_enqueue_style و wp_enqueue_script توی قالب یا افزونه خودت ثبت کنی و jquery رو وابستگی اسکریپت بذاری. آخرش هم یه بار روی موبایل تست کن که پنجره درست باز و بسته می شه.
یه کتابخانه لایت باکس و دیالوگ مودال برای jQuery و Zepto هست. با اون می تونی تصویر، گالری، HTML داخل صفحه و iframe مثل ویدیوی یوتیوب، ویمیو یا نقشه گوگل رو توی یه پنجره شناور نشون بدی. رایج ترین کاربردش باز کردن عکس بزرگ محصول یا نمونه کاره. انیمیشن هاش هم با CSS3 اجرا می شن.
نه. این کتابخانه برای jQuery یا Zepto ساخته شده، پس یکی از این دو تا باید توی صفحه لود شده باشه. اگه پروژه ات هیچ کدوم رو نداره، لازم نیست فقط برای یه پاپ آپ jQuery اضافه کنی. سراغ یه لایت باکس بدون وابستگی برو، سبک تر هم هست.
آره. نوع iframe برای ویدیوی یوتیوب و ویمیو و نقشه گوگل پیش بینی شده. برای سرویس های دیگه مثل آپارات هم معمولاً می شه آدرس جاسازی رو توی iframe گذاشت، ولی خودت تست کن که درست نمایش داده بشه. یادت باشه سرویس خارجی ممکنه توی روزهای اینترنت ضعیف دیر باز بشه.
فایل CSS و جاوااسکریپت رو توی قالب یا افزونه خودت ثبت کن و jquery رو وابستگی اسکریپت بذار. بعدش توی یه فایل جاوااسکریپت جدا، متد magnificPopup رو روی کلاس لینک هات صدا بزن. اگه قالبت از قبل این کتابخانه رو داره، دوباره اضافه اش نکن، وگرنه پنجره دوبار باز می شه یا استایل ها قاطی می شن.
آره. مجوز magnific-popup از نوع MIT هست و استفاده، تغییر و توزیع رو حتی توی پروژه های تجاری اجازه می ده. فقط اعلان مجوز و حق نشر سازنده باید توی فایل ها سر جاش بمونه. پس موقع فشرده سازی یا ادغام فایل ها اون بخش رو پاک نکن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.