پلاگین لایت باکس. بهترین افزونه های لایت باکس برای وردپرس. گالری عکس LightBox2 - نصب و پیکربندی

یکی از مقالات قبلی در مورد احتمالاً محبوب ترین گالری عکس رایگان - Lightbox که بر اساس کتابخانه اسکریپت jQuery ایجاد شده است صحبت کرد. بر اساس لایت باکس، طراحان وب بسیاری از کلون های جالب را توسعه داده اند، اما نسخه اصلی هنوز در حال توسعه است و با موفقیت برای گالری عکس در بسیاری از سایت ها استفاده می شود. بیایید آخرین به روز رسانی آن را در نظر بگیریم - افزونه Lightbox2، که اندازه کوچکی دارد و مانند همیشه به راحتی در سایت نصب می شود. در عین حال، Lightbox2 طراحی جذابی دارد، در همه مرورگرها کار می کند و به خصوص زیباست، تصاویر بزرگ را به درستی نمایش می دهد و آنها را فشرده می کند تا متناسب با اندازه صفحه نمایش کاربر باشد.

توسعه دهنده پلاگین Lightbox2 Lokesh Dhakar، برنامه نویس اهل سانفرانسیسکو است. در حال حاضر نسخه (2014) لایت باکس v2.7.1 موجود است که سعی می کنیم آن را در سایت نصب کنیم. نمونه ای از گسترش یک تصویر با استفاده از LightBox2 در شکل نشان داده شده است.

یادداشت مهم:اگر سایت شما از چندین پلاگین jQuery استفاده می کند، راحت تر است که فایل jquery.js (ترجیحا آخرین نسخه) را به پوشه root منتقل کنید تا چندین بار آن را دانلود نکنید. در این صورت خط دسترسی به آن برای همه افزونه ها یکسان خواهد بود. به طور خاص، برای مثال ما به این صورت معلوم می شود:
.
استفاده از چندین نسخه مختلف جی کوئری در یک صفحه توصیه نمی شود تا با یکدیگر تضاد نداشته باشند. در عین حال، مطمئن شوید که افزونه ها با نسخه نصب شده jQuery کار می کنند، زیرا همه نسخه ها قابل تعویض نیستند.

اکنون باید تصاویر لازم را در صفحه وب سایت قرار دهید. طبق معمول، هر کدام باید در قالب یک تصویر کوچک (کوچک) و یک تصویر در اندازه کامل (بزرگ) ارائه شوند که با پیوندی از تصویر کوچک نشان داده شده است. در تگ پیوند، علاوه بر این، rel="lightbox" را نشان می دهیم - برای یک تصویر، و اگر بخواهیم چندین تصویر را در یک گالری ترکیب کنیم، از طریق خط فاصله هر عبارتی که برای همه یکسان است، به عنوان مثال، rel=" لایت باکس وان"


و غیره

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

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

بنابراین، مطلوب است که یک تصویر بزرگ دارای حاشیه وضوح باشد، به عنوان مثال، حداقل 1000 پیکسل عمودی برای یک صفحه نمایش استاندارد Full HD - 1920x1080. در مثال ما، این تصویر "Subbotnik" است.

برای راه اندازی یک گالری عکس، فایل lightbox.js را در هر ویرایشگر HTML یا متنی، به عنوان مثال، Notepad باز کنید. در همان ابتدای فایل تنظیمات موجود را مشاهده خواهید کرد:
this.fadeDuration = 500; //زمان باز شدن تصویر ms
this.fitImagesInViewport = true; //براساس اندازه صفحه درست/نادرست
this.resizeDuration = 700; //زمان باز شدن تصویر ms
this.positionFromTop = 50; //تورفتگی پنجره lightBox در بالای صفحه
this.showImageNumberLabel = true; //خروجی عدد تصویر true/false
و غیره.

موارد اصلی با نظرات به زبان روسی ارائه شده است. مقادیر پارامترها را تغییر دهید و پس از ذخیره فایل lightbox.js، با باز کردن صفحه با گالری عکس خود در مرورگر، نتیجه را مشاهده کنید.

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

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

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

در پنجره مودال، عکس به اندازه اصلی بزرگ شده است. در همان زمان، قسمت دیگری از صفحه (پس زمینه) محو می شود، "صفحه نمایش خاموش می شود." این به بازدیدکنندگان سایت این فرصت را می دهد که بدون خروج از صفحه به تصویر از نزدیک نگاه کنند. برای افکت Lightbox در وب سایت وردپرس، از کتابخانه های جاوا اسکریپت استفاده می شود: jQuery، MooTools.

• http://lokeshdhakar.com/projects/lightbox2/
• https://github.com/lokesh/lightbox2/

Lightbox JS یک اسکریپت جلویی ساده و محجوب است که برای همپوشانی تصاویر در صفحه فعلی استفاده می شود. روی تمام مرورگرهای مدرن کار می کند. این آخرین نسخه از Lightbox JS اولیه توسط Lokesh Dhakar است. ویژگی های افزونه عبارتند از:

• index.html
• JS/JQuery-1.7.2.min.js
• JS/lightbox.js
• CSS/lightbox.css
• images/close.png
• images/next.png
• images/prev.png
• به علاوه چند فایل برای صفحه نمایشی

پلاگین لایت باکس پلاس افزونه ای است که روش Lightbox JS را توسط لوکش داکار پیاده سازی می کند (به بالا مراجعه کنید). لایت باکس پلاس برای ایجاد همپوشانی تصویر در صفحه وب استفاده می شود و به طور خودکار پیوندهای صحیح را به تصویر پوشش داده شده اضافه می کند. لایت باکس پلاس می تواند گالری تصاویر را به لایت باکس وردپرس شما اضافه کند، نمایش های اسلاید ساده، فیلم ها، فرم ها و محتوای خارجی (متون) را در پوشش های پاپ آپ نمایش دهد. صفحه پشتی با یک پس زمینه تیره یا روشن تیره می شود که به آن افکت "صفحه سیاه" می گویند.

https://github.com/AlekseyKorzun/LightBox-Gone-Wild—onLoad

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

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

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

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

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

در زیر توضیحی در مورد نقص و نحوه رفع آن ارائه شده است.

اگر 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("سریع"))

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اگر با یک سایت تصویری ساخته شده با jQuery مواجه شدید، به احتمال زیاد از یک لایت باکس استفاده می کند. قدرت لایت باکس این است که می تواند حتی یک کتابخانه تصویر ساده را به یک گالری جذاب و موثر تبدیل کند. این ویژگی دقیقاً دلیل محبوبیت چنین افزونه های جی کوئری در زمینه طراحی وب است.

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

TopUp یک کتابخانه جاوا اسکریپت با کاربری آسان برای نمایش بدون مزاحمت تصاویر و صفحات وب است. این کتابخانه از طریق jQuery و jQuery UI مدیریت می شود تا از سازگاری و فشرده بودن بین مرورگرها اطمینان حاصل شود.

Highslide یک ابزار ویژه برای مشاهده تصاویر، رسانه ها و گالری ها است.

پلاگین سفارشی کوچک برای jQuery 1.3+.

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

prettyPhoto نه تنها از تصاویر، بلکه از فیلم ها، فلش، یوتیوب و آژاکس نیز پشتیبانی می کند. لایت باکس برای فایل های رسانه ای.

Slimbox 2 یک کلون 4 کیلوبایتی از Light box 2 است که با استفاده از jQuery پیاده سازی شده است.

Shadowbox یک برنامه تحت وب برای مشاهده فایل های رسانه ای است که از همه فرمت های رایج پشتیبانی می کند. Shadowbox با جاوا اسکریپت و CSS نوشته شده است و بسیار قابل تنظیم است.

یکی از مزایای این افزونه امکان باز کردن هر نوع فایلی است - از محتوای تعبیه شده تا فایل swf، از یک تصویر ساده تا یک فایل pdf.

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

GreyBox می تواند برای نمایش وب سایت ها، تصاویر و سایر محتواها استفاده شود.

Super Box افزونه ای است که پنجره ها را با افکت لایت باکس نمایش می دهد.