گالری سبد پاسخگو. طراحی وب و بهینه سازی موتورهای جستجو

لایت باکس یک پلاگین جی کوئری است که برای نمایش یک تصویر یا هر محتوای دیگری در یک پنجره خاص استفاده می‌شود که معمولاً روی یک پس‌زمینه سایه‌دار شفاف در بالای محتوای صفحه اصلی نشان داده می‌شود.

قبل از نصب افزونه در صفحه و راه اندازی آن، بیایید نگاهی به نمونه های آن بیندازیم:

شروع کار با Lightbox

آخرین نسخه افزونه را دانلود کنید (از طریق Bower نیز موجود است: bower install lightbox2 --save). پس از آن، فایل زیپ را از حالت فشرده خارج کنید و به نمونه کار بریده شده در پوشه نگاهی بیندازید. مثال ها.

آماده نصب لایت باکس در صفحه خود هستید؟ با اتصال CSS و Javascript شروع کنید. می توانید هر دوی این فایل ها را از پوشه بردارید دور. کد زیر را بین تگ های head در صفحه وب خود قرار دهید

کد زیر را که افزونه را قبل از بسته شدن تگ بدنه متصل می کند وارد کنید:

اطمینان حاصل کنید که جی کوئری مورد نیاز لایت باکس نیز بارگذاری شده است. اگر قبلاً از JQuery (نیاز به JQuery 1.7 یا بالاتر) در صفحه استفاده می کنید، مطمئن شوید که قبل از بارگیری آن lightbox.js. اگر جی کوئری را فعال ندارید، از dist/js/lightbox-plus-jquery.js که قبلاً این کتابخانه را دارد استفاده کنید یا آخرین نسخه را از آن دانلود کنید. سایت. مطمئن شوید که چهار تصویر ذکر شده در lightbox.cssمکان در محل مشخص شده می توانید از پوشه عکس بگیرید /dist/images.

حالا بیایید به سراغ کد HTML برویم. یک ویژگی data-lightbox را به پیوند حاوی تصاویری که می‌خواهیم افزونه خود را روی آن اعمال کنیم اضافه کنید. برای مقدار مشخصه، از نامی استفاده کنید که برای هر تصویر منحصر به فرد باشد. مثلا:

تصویر شماره 1

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

Img 2 Img 3 Img 4

تنظیمات لایت باکس

اگر می خواهید هر یک از گزینه های پیش فرض را تغییر دهید، گزینه: متد را فراخوانی کنید.

lightbox.option(( "resizeDuration": 200، "wrapAround": true))

• همیشهShowNavOnTouchDevices پیش فرض: نادرست

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

• fadeDuration پیش فرض: 500

  مدت زمانی که طول می کشد تا ظرف ناپدید شود، بر حسب میلی ثانیه.

• fitImagesInViewport پیش فرض: درست است

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

• حداکثر عرض

  در صورت تنظیم، ارتفاع تصویر به این مقدار (بر حسب پیکسل) محدود خواهد شد. نسبت تصویر رعایت نخواهد شد.

• حداکثر ارتفاع

  در صورت تنظیم، عرض تصویر به این مقدار (بر حسب پیکسل) محدود می شود. نسبت تصویر رعایت نخواهد شد.

• positionFromTop پیش فرض: 50

  فاصله از بالای درگاه دید تا محفظه Lightbox (بر حسب پیکسل).

• تغییر اندازه مدت پیش فرض: 700

  زمانی که ظرف لایت باکس هنگام تغییر تصاویر، عرض و ارتفاع خود را تغییر می دهد اندازه های متفاوت(در میلی ثانیه).

• showImageNumberLabel پیش فرض: درست است

  اگر نادرست، متن شماره تصویر فعلی و تعداد کل تصاویر در مجموعه را نشان می دهد، به عنوان مثال: "تصویر 2 از 4".

• wrapAround پیش فرض: نادرست

  اگر درست است، واقعی، پس از نمایش آخرین تصویر، دکمه نمایش تصویر بعدی ناپدید نمی شود. با کلیک بر روی آن اولین تصویر نمایش داده می شود.

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

نحوه نصب لایت باکس آرشیو را دانلود کنید، بسته بندی کنید و در سرور آپلود کنید.
بعد، اسکریپت را در وب سایت خود جاسازی کنید. که در کد htmlکد را در صفحه بنویسید

و آخرین مرحله. خروجی تصاویر
شما عکس های زیر را خروجی می دهید:

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

پارامتر data-lightbox="image" مسئول این اثر است.
اگر تصاویر زیادی در صفحه دارید، می‌توانید تصاویر را بدون پیمایش در یک پنجره بازشو باز کنید، یا می‌توانید تصاویر را با هم ترکیب کنید و آنها در یک پنجره پاپ‌آپ پیمایش خواهند کرد.
برای ترکیب تصاویر باید از یک نام برای هر گروه از تصاویر استفاده کنید

همانطور که می بینید، تمام تصاویر را می توان در یک پنجره بازشو پیمایش کرد، زیرا لایت باکس داده برای همه یکسان است.
اگر می خواهید تصاویر را از هم جدا کنید تا از بین نرود، از کدی مانند این استفاده کنید

حالا هر عکس جداگانه باز می شود، یعنی راهی برای اسکرول به عکس بعدی وجود ندارد.

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

و دومی کم است اضافه لازم، این استثناء تصاویر تکراری است.
به طور پیش‌فرض غیرفعال است، اما می‌توانید آن را مستقیماً در اسکریپت، در همان مکانی که دکمه اندازه واقعی فعال است، فعال کنید.
در استفاده معمولی از اسکریپت این تابعفقط در موقعیت های کاملاً ناامیدکننده می توان از آن استفاده کرد.

توجه داشته باشید که سه تا از پیوندها خالی هستند، به این معنی که آنها به تصاویر بزرگ پیوند می زنند اما بین برچسب ها چیزی وجود ندارد و یک پیوند با یک تصویر پر شده است.
در نتیجه، تنها یک عکس در مرورگر قابل مشاهده است، هنگامی که روی آن کلیک می کنید، یک عکس بزرگتر باز می شود و تمام تصاویر از لینک های خالی کشیده می شوند و می توانید در آن اسکرول کنید.
و اینجا را نگاه کنید، در لینک ها دو تصویر یکسان وجود دارد (با رنگ قرمز مشخص شده است) و وقتی از بین آن ها حرکت کنید، دو عکس یکسان را مشاهده خواهید کرد.
اگر در مثال خاصاگر حذف تکراری را فعال کنید، هیچ تصویر تکراری وجود نخواهد داشت.

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

نظرات

2014/12/11 ویکتور
فیلمنامه خیلی خوبه شما حتی می توانید یک تصویر را با استفاده از عنوان داده توصیف کنید. اما من یک مشکل داشتم، من یک اسکریپت در صفحه داشتم که هنگام اتصال بلوک را به کناری فشار می داد از این اسکریپتاز من ناپدید می شود علاوه بر این، در صورت اتصال اسکریپت های js ناپدید می شود. من فکر می کردم به دلیل نسخه متناقض است، اما نه به خاطر آنها.

2015/05/23 ویکتور
وقتی برای من کار نمی کند
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
شبیه این است بدون?ver=20150523142822
آثار

1394/05/25 کها
خیلی ممنون

2015/06/29 آندری
خیلی ممنون از کارتون! همه چیز تقریباً اولین بار کار کرد)

2015/08/26 اسکندر
من آنالوگ های مختلف را امتحان کردم. این یکی بلافاصله بدون درگیری شد. افزایش به اصلی اگر من از ماوس برای گرفتن و جابجایی میدان تصویر استفاده کنم، کاملاً به هم ریخته می شد

11/01/2015 ایگور
سلام!
گالری عالی خیلی ممنون.
فقط این سوال:
در مثال بالا (3 تصویر)، تصاویر در یک حلقه نشان داده شده اند. اما در نسخه دانلود شده lightbox-2.7.1 این عملکرد کار نمی کند. هنگام مشاهده آخرین تصویر، دکمه دیگر ظاهر نمی شود.
لطفا به من بگویید دلیل آن چه می تواند باشد؟

1394/11/14 آنتون

1394/11/15 آنتون
در IOS و اندروید تیرگی صفحه تمام صفحه را نمی پوشاند!!! مشکل چی میتونه باشه در یک لایت باکس معمولی - همه چیز خوب است!

1394/11/15 آنتون
در IOS و اندروید تیرگی صفحه تمام صفحه را نمی پوشاند!!! مشکل چی میتونه باشه در یک لایت باکس معمولی - همه چیز خوب است!

2016/03/30 آنتون
سلام!
آیا می توان تصویر را با وضوح بالاتر باز کرد؟

2016/11/18 یورا
خیلی ممنون! همه چیز عالی کار می کند!

2017/05/04 ایگور
خیلی ممنون بابت فیلمنامه! من مدت زیادی است که دنبال چیزی شبیه به آن و نصب آسان آن هستم.
فقط به دلایلی زیر عکس های من کتیبه های عجیب و غریب ظاهر می شود Рзображение 8 РеР· 8

شاید رمزگذاری باید جایی اصلاح شود؟

1396/09/12 بارسوک
قبلا کجا بودی؟ من تمام روز را صرف تلاش کردم تا بفهمم چگونه موارد تکراری را حذف کنم))

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

لایت باکس یک کتابخانه کوچک جاوا اسکریپت است که برای نمایش تصاویر بزرگ در بالای آن استفاده می شود صفحه فعلی. نصب آن آسان است و در همه موارد کار می کند مرورگرهای مدرن.

این اسکریپت به شما امکان می دهد تصاویر را هم به صورت تکی و هم با تغییر در یک پنجره پاپ آپ نمایش دهید.

دستورالعمل استفاده.

بخش اول: اتصال کتابخانه.

1. آرشیو با اسکریپت را از اینجا دانلود و باز کنید

2. در پوشه JS، فایل های jquery-1.10.2.min.js و lightbox-2.6.min.js را پیدا کنید و آنها را با اسکریپت های خود در سایت خود در پوشه کپی کنید.

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

4. در پوشه css، فایل lightbox.css را پیدا کنید و آن را با فایل های سبک خود در پوشه کپی کنید.

5. این فایل را با افزودن خطوط زیر بین تگ ها به صفحه خود متصل کنید:

6. از پوشه img، فایل های زیر را به سرور خود در پوشه حاوی تصاویر طراحی سایت خود کپی کنید: و next.png . این فایل ها در فایل سبک lightbox.css استفاده می شوند. به طور پیش فرض، فایل style به تصاویری اشاره دارد که در پوشه img قرار دارند که دارای همان والد پوشه css است. اگر پوشه تصاویر و پوشه سبک‌های شما در پوشه‌های کاملاً متفاوتی هستند، باید مسیرهای تصاویر موجود در فایل lightbox.css را به مسیرهای مناسب تغییر دهید.

قسمت دوم: درج تصاویر در صفحه.

این اسکریپت با کلیک روی یک پیوند فعال می شود. پیوند می تواند متن یا تصویر باشد. برای اینکه به اسکریپت نشان دهید کدام پیوند را باید پردازش کند، باید ویژگی data-lightbox را به پیوند اضافه کنید و هر مقداری را به آن اختصاص دهید.

تک عکس.

متن پیوند 1 متن پیوند 2 متن پیوند 3

* ویژگی عنوان را می توان به دلخواه پر کرد. اگر پر باشد، محتوای آن در زیر تصویر پاپ آپ نمایش داده می شود.

گروه عکس.

فرض کنید شما گروهی از تصاویر دارید و زمانی که روی یکی از پیوندها کلیک می کنید، می خواهید بتوانید در یک پنجره پاپ آپ، تمام تصاویر این گروه را بدون نیاز به بستن پنجره پاپ آپ اسکرول کنید.

متن پیوند 1 متن پیوند 2 متن پیوند 3

*قبلاً از ویژگی rel="lightbox" برای اسکریپت LiteBox استفاده می‌کردید، اکنون هم می‌توانید از آن استفاده کنید و کار خواهد کرد، اما استفاده از ویژگی‌های جدید ترجیح داده می‌شود، زیرا قابلیت‌های پیشرفته‌تری ارائه می‌دهد.

به نظر می رسد که همه چیز انجام شده است، همه چیز باید کار کند، اما:

اگر گروهی از تصاویر را از تصاویر تشکیل دهیم، در هنگام مشاهده، "تصویر 1 از 8" در پنجره پاپ آپ زیر تصاویر نشان داده می شود؟ من می خواهم چیزی شبیه به این "تصویر 1 از 8" را ببینم.

برای انجام این کار، در فایل lightbox-2.6.min.js در خط 13 باید این را جایگزین کنید:

بازگشت "تصویر " + b + " از " + c

بازگشت "تصویر " +b +" از " +c

بازگشت "تصویر " + b + " از " + c

برگرداندن "تصویر " +b +" از " +c

آخرین باری که از این اسکریپت استفاده کردم، لازم بود از آن همراه با اسکریپت چرخ فلک استفاده کنم و متوجه یک اشکال شدم.

در زیر توضیحی درباره ایراد و نحوه رفع آن آورده شده است.

اگر 2 گروه مختلف از تصاویر در صفحه داشته باشیم و برای مثال در گروه اول تصاویر دارای شرح هستند (ویژگی عنوان پر شده است) و در گروه دوم ویژگی عنوان دارای مقادیر خالی است یا در آن مشخص نشده است. همه، سپس هنگام مشاهده تصاویر بدون توضیحات (اگر حداقل یک عکس را با توضیحات مشاهده کرده باشیم)، همچنان شرح آخرین تصویر مشاهده شده را نمایش خواهیم داد. یعنی اسکریپت از پاک کردن عنوان پنجره پاپ آپ امتناع می ورزد و در صورت موجود بودن آن را با عنوان جدید جایگزین می کند. چطوری میشه اینو تعمیر کرد؟

برای رفع خطای پاک نشدن ویژگی Title، متن فایل lightbox-2.6.min.js را در خط 219 جایگزین کنید:

if (نوع this.album.title !== "undefined" amp;amp;amp;amp;amp;amp; this.album.title !== "") ( this.$lightbox.find(".lb-caption ").html(this.album.title).fadeIn("سریع"))

if (نوع این . آلبوم [ این . currentImageIndex ] . عنوان ! =="نا تعریف" & amp; amp تقویت کننده این .

محبوب ترین کتابخانه لایت باکس جاوا اسکریپت است که ما سال هاست از آن بر روی دسکتاپ استفاده می کنیم، اما نه پلتفرم های موبایلاوه

من 14 پلاگین لایت باکس را با پشتیبانی از پلتفرم های موبایل به شما معرفی می کنم.

PhotoSwipe

PhotoSwipe یک پلاگین سبک وزن، لمسی و مهمتر از همه ماژولار است که به شما امکان می دهد قسمت های غیر ضروری را که به آن نیاز ندارید حذف کنید. در آن به خوبی کار می کند مرورگرهای موبایل. می توانید با کشیدن انگشت خود تصاویر را تغییر دهید نرم افزار استاندارد، با انتقال های صاف.

• کتابخانه های مورد نیاز: هیچ.
• پشتیبانی از مرورگر: IE8+، Chrome، Firefox، Safari، Opera و سایر مرورگرهای موبایل.
• مجوز: مجوز MIT

پاپ آپ باشکوه

Magnific Popup پلاگین لایت باکس دیگری است که توسط همان نویسنده PhotoSwipe، Dmitry Semenov توسعه یافته است. این افزونه به عنوان یک پلاگین JQuery/Zepto ارائه می شود و همچنین شامل پشتیبانی هایی می شود که PhotoSwipe فاقد آن است، مانند پشتیبانی از ویدئو، نقشه و Ajax. این یک جایگزین عالی برای کسانی است که ترجیح می دهند گزینه های بیشتری در اختیار داشته باشند.

• کتابخانه های مورد نیاز: JQuery 1.9.1+ یا Zepto.js
• پشتیبانی از مرورگر: IE7 (جزئی)، .
• مجوز: مجوز MIT

SwipeBox

Swipebox یک پلاگین JQuery با پشتیبانی از حرکات لمسی برای سیستم عامل های تلفن همراه است. همچنین علاوه بر تصاویر، از ویدیوهای یوتیوب و ویمیو نیز پشتیبانی می کند. Swipebox به راحتی نصب می شود و چندین گزینه برای سفارشی کردن تنظیمات آن وجود دارد. من فکر می‌کنم Swipebox برای کسانی که جاوا اسکریپت را نمی‌دانند، یک پلاگین لایت‌باکس بیش از حد در هم ریخته است.

لایت باکس برای بوت استرپ

در ابتدا، افزونه لایت باکس در بوت استرپ گنجانده نشده است. Lightbox for Bootstrap این مشکل را برطرف می کند. اگر از بوت استرپ استفاده می کنید، استفاده از این کتابخانه به شدت توصیه می شود. این افزونه به خوبی با بوت استرپ ادغام می شود.

• کتابخانه های مورد نیاز: ماژول JQuery و Bootstrap
• پشتیبانی از مرورگرها: IE8+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز گنو

لایت باکس نیوو

Nivo Lightbox یک پلاگین لایت باکس بسیار قابل تنظیم است. گزینه های مختلف به شما امکان تغییر می دهد ظاهر. به عنوان مثال: تم، انیمیشن ظاهری، و نوع ناوبری.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی مرورگر:
• مجوز: مجوز MIT

ImageLightbox

ImageLightbox یک پلاگین سبد لایت باکس ساده و بدون حاشیه است. این فقط برای اهداف تصویر استفاده می شود، از این رو نام آن است. نه ویدئو و نه انواع دیگر پشتیبانی نمی شوند. همچنین نیازی به نشانه گذاری HTML اضافی ندارد. برچسب زدن کافی است. استفاده از این افزونه آسان است.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگر: IE9+، Chrome، Firefox، Safari و Opera
• مجوز: تعریف نشده است

مینی لایت باکس

یک افزونه لایت باکس دیگر بدون افزونه. این کتابخانه تنها 2 کیلوبایت وزن دارد و فقط با تصاویر کار می کند. اگر فقط برای آن در حال توسعه هستید، این افزونه عالی است آخرین نسخهمرورگر و نیازی به پشتیبانی از ویدئو یا فرمت های دیگر نیست.

• کتابخانه های مورد نیاز: خیر
• پشتیبانی مرورگر: اینترنت اکسپلورر 10+، کروم، فایرفاکس، سافاری و اپرا
• مجوز: مجوز MIT

لایت کیس

Lightcase یک پلاگین لایت باکس عالی است. پشتیبانی از انواع مختلفی از انیمیشن ها مانند: محو شدن، الاستیک، زوم و اسکرول. علاوه بر این، انواع مختلفی از رسانه ها از جمله Youtube Embed، HTML Video، SWF و Input Forms را نیز پشتیبانی می کند.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگر: IE9+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز GPL

نور پر

Featherlight یک پلاگین اساسی با وزن 6 کیلوبایت برای توسعه دهندگان با تجربه است و فقط شامل موارد ضروری است. اگر برای مثال برای گروهی از تصاویر در گالری به افکت لایت باکس نیاز دارید، می‌توانید پسوند گالری را فعال کنید. همچنین می توانید افزونه افزونه خود را برای استفاده در پروژه های خود توسعه دهید.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگرها: IE8+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز MIT

لایه نور

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

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگر: IE9+، Chrome، Firefox، Safari و Opera
• مجوز: مجوز MIT

لایت گالری

LightGallery، یک پلاگین لایت باکس دیگر با مقدار زیادکارکرد. این شامل بیش از 20 گزینه برای سفارشی کردن جزئیات مختلف جلوه های لایت باکس است.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگرها: IE7+، Chrome، Firefox، Safari، Opera، IOS، Android و ویندوز فون
• مجوز: مجوز MIT

فلوید باکس

پلاگین لایت باکس Fluidbox با تصاویر کار می کند. شامل پشتیبانی از نمایشگرهای مختلف، از جمله تصاویر شناور، تصاویر موقعیت مطلق، تصاویر با حاشیه و بالشتک، و گالری ها. افزونه وردپرس نیز وجود دارد.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگر: IE9+، Chrome، Firefox، Safari، Opera
• مجوز: مجوز MIT

StripJS

StripJS یک پلاگین لایت باکس منحصر به فرد است. به جای پوشاندن تصویر، ماژول لایت باکس با تصویر از یک طرف به سمت دیگر اسلاید می شود تا تصویر تمام محتوا را مسدود نکند. StripJS از تصاویر و ویدیوها پشتیبانی می کند.

• کتابخانه های مورد نیاز: JQuery
• پشتیبانی از مرورگر: IE7+، Chrome، Firefox، Safari، Opera، IOS 5+ و Android 3+
• مجوز: مجوز Creative Commons BY-NC-ND 3.0

این واقعاً عالی است که ما جدیدترین فناوری های وب را بیشتر و بیشتر در دسترس داریم که کار ما را بسیار آسان تر می کند. پنجره های مودال یک عنصر کاربردی برای نمایش هر نوع محتوای HTML هستند که با هدف ایجاد یک طراحی و رابط کاربری راحت است.

در این بررسی، ما لیستی از کتابخانه‌ها و اسکریپت‌های JQuery را برای ایجاد لایت‌باکس جمع‌آوری کرده‌ایم که به توسعه‌دهندگان و طراحان کمک می‌کند تا وب‌سایت‌های بهتر و حرفه‌تری ایجاد کنند.

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

1. Photoswipe

PhotoSwipe یک گالری عکس HTML است مبتنی بر CSSو جاوا اسکریپت، به طور خاص برای دستگاه های تلفن همراه. هنگام توسعه آن، نویسندگان خدمات مشاهده تصویر برای دستگاه های تلفن همراه را به عنوان مثال در نظر گرفتند. دستگاه های iOSو گوگل PhotoSwipe یک رابط آشنا و بصری دارد که کار با تصاویر را در یک سایت تلفن همراه آسان‌تر می‌کند.

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

2. Swipebox

Swipebox – پلاگین JQuery برای رایانه های رومیزی، گوشی های هوشمند و تبلت ها. او پشتیبانی میکند کنترل لمسیبرای دستگاه های تلفن همراه، ناوبری صفحه کلید برای دستگاه های دسکتاپ، انتقال CSS با کنترل های JQuery، نسبتا آسان برای سفارشی کردن.

این افزونه بر روی کروم، سافاری، فایرفاکس، اپرا، اینترنت اکسپلورر 8+، iOS4+، اندروید، ویندوز فون تست شده است. تحت مجوز MIT منتشر شد.

3. آی لایت باکس

iLightBox ایجاد پنجره‌های مودال واکنش‌گرا بسیار زیبا با استفاده از JQuery را آسان می‌کند. iLightBox با ترکیب پشتیبانی از طیف گسترده‌ای از محتوای رسانه‌ای با پوسته‌های عالی و یک API کاربرپسند، تلاش می‌کند تا لایت‌باکس را تا جایی که می‌تواند کامل کند. iLightBox امکان مشاهده را فراهم می کند حالت تمام صفحهپوسته های سازگار با رتینا، مدیریت رویدادهای لمسی، ادغام YouTube و Vimeo برای ویدیوی HTML5، API قدرتمند جاوا اسکریپت. افزونه دارد پشتیبانی رایگانو به روز رسانی نسخه

4. لایت باکس تصویر

Image Lightbox یک افزونه مینیمالیستی، توسعه پذیر و قابل تنظیم برای IOS، Android و Windows Phone است. به لطف استفاده از تبدیل ها و انتقال های CSS، می توانید به سادگی تصویر بعدی را با استفاده از صفحه کلید خود بارگذاری کنید.

5. Magnific Popup

Magnific Popup رایگان است جی کوئری پاسخگوافزونه ای که بر ارائه تمرکز دارد بهترین تعاملبین کاربر و دستگاه اکثر پلاگین های لایت باکس از شما می خواهند که اندازه پنجره را با استفاده از JS تعیین کنید. در Magnific Popup، می توانید از واحدهای نسبی مانند EM استفاده کنید یا با استفاده از پرس و جوهای رسانه CSS، اندازه لایت باکس را تغییر دهید.

6. Nivo Lightbox

Nivo Lightbox یک پلاگین لایت باکس انعطاف پذیر است. گزینه های زیادی برای انتخاب وجود دارد که با استفاده از آنها می توانید ظاهر لایت باکس را به راحتی تغییر دهید. به عنوان مثال، تم، اثر انتقال و روش ناوبری را تغییر دهید.

7.جنس چراغ

Lightcase یک پلاگین لایت باکس انعطاف پذیر، پاسخگو و قابل توسعه است که با آن توسعه یافته است با استفاده از JQuery. این برنامه در تمام مرورگرهای محبوب مانند Internet Explorer 7+، Firefox، Opera، Webkit و غیره کاملاً کار می کند. این افزونه از تماس‌های عکس، ویدیو، ویدیوی HTML5، Iframe، SWF و AJAX پشتیبانی می‌کند.

8. Lightlayer.js

LightLayer یک اسکریپت برای نمایش لایت باکس های تطبیقی ​​است که به خوبی با سایر اجزا در هر صفحه ای کار می کند. استفاده از این اسکریپت واقعاً بسیار آسان است. LightLayer کنترل بسیاری از پارامترها را فراهم می کند: رنگ پس زمینه و شفافیت، موقعیت لایت باکس، انتقال باز/بستن و بسیاری از ویژگی های قابل تنظیم دیگر.

9. Strip.js

Strip یک لایت باکس است که فقط تا قسمتی از صفحه گسترش می یابد. این باعث می شود که آن را کمتر مداخله کند و به آن اجازه می دهد تا با سایر عناصر صفحه در تعامل باشد صفحه نمایش های بزرگ; بر دستگاه های تلفن همراهلایت باکس ظاهری کلاسیک دارد. Strip از JQuery استفاده می کند و در تمام مرورگرهای اصلی پشتیبانی می شود.

10. Fluidbox

Fluidbox یک پلاگین جی کوئری است که برای ارائه یک لایت باکس بدون مزاحم و پاسخگو طراحی شده است که برای تصاویر با کیفیت بالا. در دستگاه های تلفن همراه عالی عمل می کند و همچنین می تواند برای خروجی تصویر زیبا روی صفحه نمایش با وضوح بالاتر استفاده شود.

11. نور پر

Featherlight یک افزونه بسیار سبک با 400 خط جاوا اسکریپت، 100 خط CSS و حجم کمتر از 6 کیلوبایت است. لایت باکس هوشمند و پاسخگو، به طور پیش فرض از تصاویر، AJAX و iframe پشتیبانی می کند. شما همچنین می توانید آن را مطابق با نیازهای خود تطبیق دهید. Featherlight در IE8+، تمام مرورگرهای مدرن و پلتفرم های موبایل کار می کند.

12. یالب

Yalb مخفف Yet Another Lightbox است - اما اینطور نیست. Yalb دارای مجموعه بزرگی از رابط‌ها، از جمله رویدادهای سفارشی است که به شما امکان می‌دهد وضعیت آن (باز، بسته) را تعیین کنید.