Jquery лайтбокси з 2 об'єктами. Веб-дизайн та пошукова оптимізація. Кращі JQuery плагіни lightbox для WordPress

Якщо вам потрапить сайт для зображень, побудований на jQuery, то, напевно, на ньому буде використовуватися лайтбокс. Сила лайтбоксу полягає в тому, що він може перетворити навіть просту бібліотеку картинок на привабливу та ефективну галерею. Саме в цій особливості полягає популярність таких плагінів для jQuery у сфері веб дизайну.

Завдяки спільноті jQuery існує безліч плагінів лайтбоксу, що створює чудові можливості для дизайнерів по роботі із зображеннями. У нашому уроці представлено 15 різних плагінів, на які варто звернути увагу.

TopUp

TopUp - проста у використанні бібліотека JavaScript для ненав'язливого виведення зображень та веб-сторінок. Бібліотека керується через jQuery та jQuery UI для забезпечення кроссбраузерної сумісності та компактності.

Плагін Highslide

Highslide – спеціальний інструмент для перегляду зображень, медіа та галерей.

Color Box

Маленький плагін для jQuery 1.3+.

Lightbox 2 - простий, ненав'язливий скрипт, який використовується для виведення зображення в шарі на поточній сторінці. Його просто встановити, і він працює у всіх сучасних браузерах.

prettyPhoto підтримує не лише зображення, а й відео, flash, YouTube та Ajax. Лайтбокс для медіафайлів.

Slimbox 2 – клон Light box 2 розміром 4 KB, реалізований за допомогою jQuery.

Shadowbox - веб-додаток для перегляду медіа файлів, який підтримує всі популярні формати. Shadowbox написано на JavaScript та CSS, і має гарні можливості налаштування.

Pirobox Extended V.1.0.

Однією з переваг даного плагіна є здатність відкривати будь-який тип файлу - від вбудованого змісту до файлу.swf, від простого зображення до файлу.pdf.

Інші чудові можливості: автоматична зміна розміру зображення та підтримка технології "перетягни та кинь".

GreyBox можна використовувати для виведення веб-сайтів, зображень та іншого змісту.

Super Box – плагін, який виводить вікна з ефектом лайтбоксу.

Lightbox це маленька JavaScript бібліотека, яка використовується для показу великих зображень на поточній сторінці. Вона легко встановлюється та працює у всіх сучасних браузерах.

Скрипт дозволяє виводити зображення як поодинокі так і з перемиканням усередині спливаючого вікна.

Інструкція по використанню.

ЧАСТИНА I: Підключення бібліотеки.

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. За замовчуванням файл стилів звертається до картинок, які розташовуються в папці img, яка має з папкою css одного і того ж батька. Якщо у вас папка зображень і папка стилів знаходяться в абсолютно різних папкахварто змінити шляхи до картинок у файлі lightbox.css на відповідні.

ЧАСТИНА II: Вставлення картинок на сторінці.

Цей скрипт спрацьовує на клік за посиланням. Посилання може бути як текст так і картинка. Для того, щоб вказати скрипту, яке посилання має ним оброблятися, потрібно посиланням додати атрибут. data-lightboxта прописати йому будь-яке значення.

Поодинокі картинки.

Текст посилання 1 Текст посилання 2 Текст посилання 3

* атрибут title можна заповнювати за бажанням. Якщо він заповнений, його вміст буде виведено під спливаючою картинкою.

Група картинок.

Допустимо у вас є група зображень і при натисканні по одному з посилань, ви хочете щоб у спливаючому вікні можна було перегорнути всі картинки цієї групи без необхідності закривати спливаюче вікно.

Текст посилання 1 Текст посилання 2 Текст посилання 3

*Раніше для скрипту LiteBox ви використовували атрибут rel="lightbox" Ви можете і зараз його використовувати, і він буде працювати, але використання нових атрибутів краще, оскільки дає більш широкі можливості.

Начебто все зробили, все має працювати, але:

Якщо із зображень формуємо групу картинок, то під час перегляду у спливаючому вікні під картинками вказується «image 1 of 8»? а хотілося б бачити щось на кшталт цього «зображення 1 із 8».

Для цього у файлі lightbox-2.6.min.js у рядку 13 потрібно замінити ось це:

return "Image" + b + " of " + c

return "Зображення " + b + " з " + c

Коли я використав цей скрипт останній раз, мені потрібно було його використовувати разом зі скриптом карусельки, тож помітив один глюк.

Нижче опис глюку та спосіб його виправити.

Якщо у нас на сторінці розміщено 2 різні групи зображень, і наприклад, у першій групі у картинок є підписи (заповнений атрибут title), а в другій групі атрибут title має порожні значення або не прописаний зовсім, то при перегляді картинок без опису (усли до цього ми переглянули хоча б одну картинку з описом) у нас все одно виведеться опис останньої переглянутої картинки. Тобто скрипт відмовляється очищати title для вікна, що спливає, він замінює його на новий, за його наявності. Як це виправити?

Для виправлення помилки не очищення атрибуту Title слід у файлі lightbox-2.6.min.js у рядку 219 замінити текст:

if (typeof this.album.title !== "undefined" amp;amp;amp;amp;amp;amp; this.album.title !== "") ( this.$lightbox.find(".lb-caption ").html(this.album.title).fadeIn("fast") )

Це справді чудово, що нам доступно все більше новітніх веб-технологій, за допомогою яких наша робота стане набагато простішою. Модальні вікна – функціональний елемент для відображення будь-якого типу HTML-контенту, орієнтований створення зручного дизайну та інтерфейсу.

У цьому огляді ми зібрали список JQuery бібліотек та скриптів для створення lightbox, які допоможуть розробникам та дизайнерам створювати ще якісніші та професійні веб-сайти.

Ви можете легко додати нижченаведені скрипти на свій сайт. Тому без подальших передмов давайте перейдемо до теми та розглянемо ці супер JQuery – бібліотеки лайтбоксів, якими ви можете поповнити свій арсенал.

1. Photoswipe

PhotoSwipe – це HTML фотогалерея на основі CSS та JavaScript, орієнтована спеціально на мобільні пристрої. Автори при її розробці взяли як зразок сервіси перегляду зображень для мобільних пристроїв IOSі Google. PhotoSwipe має знайомий та інтуїтивно зрозумілий інтерфейс, що дозволяє простіше працювати із зображеннями на мобільному сайті.

Підтримуються всі основні функції: перехід до наступного або попереднього зображення, збільшення, перетягування, зменшення або закриття та інші.

2. Swipebox

Swipebox - JQuery - плагін для стаціонарних комп'ютерів, смартфонів та планшетів. Він підтримує сенсорне керування для мобільних пристроїв, навігацію за допомогою клавіатури для настільних пристроїв, CSS переходи з резервним перемиканням на керування JQuery, досить простий у налаштуванні.

Плагін був протестований на Chrome, Safari, Firefox, Opera, Internet Explorer 8 + , iOS4 + , Android , Windows Phone. Випускається за ліцензією MIT.

3. iLightbox

iLightBox дозволяє легко створювати дуже гарні адаптивні модальні вікна, використовуючи JQuery . Поєднуючи в собі підтримку широкого спектру медіа-контенту з чудовими скінами та зручним API, iLightBox прагне зробити lightbox настільки ідеальним, наскільки це тільки можливо. iLightBox надає можливість перегляду в повноекранному режимі, Retina-сумісні скіни, сенсорне управління подіями, можливість інтеграції YouTube та Vimeo для HTML5-відео, потужний JavaScript API. Плагін має безкоштовну підтримкута оновлення версій.

4. Image Lightbox

Image Lightbox – мінімалістичний, розширюваний та налаштований плагін під IOS, Android та Windows Phone. Ви можете просто завантажувати за допомогою клавіатури наступне зображення завдяки використанню перетворень та переходів CSS.

5. Magnific Popup

Magnific Popup – це безкоштовний адаптивний JQueryплагін, який орієнтований на забезпечення найкращої взаємодії між користувачем та пристроєм. Для більшості lightbox-плагінів потрібно визначати розмір вікна за допомогою JS. У Magnific Popup ви можете використовувати відносні одиниці вимірювання, такі як EM або змінювати розмір lightbox за допомогою медіа-запитів CSS.

6. Nivo Lightbox

Nivo Lightbox – це гнучкий lightbox-плагін. На вибір пропонується безліч опцій, за допомогою яких можна легко змінити зовнішній виглядлайтбоксу. Наприклад, змінити тему, ефект переходу та метод навігації.

7. Lightcase

Lightcase – гнучкий, адаптивний і розширюваний lightbox-плагін, розроблений за допомогою JQuery. Він чудово працює у всіх популярних браузерах, таких як Internet Explorer 7+, Firefox, Opera, Webkit та інших. Плагін підтримує фото, відео, HTML5-відео, Iframe, SWF та AJAX-дзвінки.

8. Lightlayer.js

LightLayer – скрипт для виведення адаптивних lightbox, він добре працює разом з іншими компонентами на будь-якому екрані. Цей скрипт справді дуже простий у використанні. LightLayer надає контроль над безліччю параметрів: колір і непрозорість фону, положення lightbox, відкриття / закриття переходів та багато інших функцій, що настроюються.

9. Strip.js

Strip – це lightbox, який розгортається лише на частину сторінки. Це робить його менш нав'язливим і дозволяє взаємодіяти з іншими елементами сторінки великих екранах; на мобільних пристроях lightbox має класичний вигляд. Strip використовує JQuery та підтримується у всіх основних браузерах.

10. Fluidbox

Fluidbox – це JQuery плагін, розроблений, щоб реалізувати ненав'язливий, адаптивний lightbox, який ідеально підходить для зображень з великою роздільною здатністю. Він відмінно працює на мобільних пристроях, а також може застосовуватися на екранах з більш високою роздільною здатністюдля виведення зображень.

11. Featherlight

Featherlight – дуже легкий плагін у 400 рядків JavaScript , 100 рядків CSSта розміром менше 6Кб. Інтелектуальний, адаптивний lightbox, за умовчанням підтримує зображення, AJAX та iframe. Ви також можете адаптувати його до своїх завдань. Featherlight працює в IE8+, всіх сучасних браузерах та мобільних платформах.

12. Yalb

Yalb розшифровується, як ще один lightbox (Yet Another Lightbox) але це не так. Yalb поставляється з великим набором інтерфейсів, що включають події користувача, які дозволяють визначати його стан ( відкритий, закритий).

Скрипт організує перегляд зображень у спливаючому вікні. Перегляд можна організувати або по одному зображенню, або галереєю, прогортаючи зображення у спливаючому вікні.
Найпростіший і найшвидший у встановленні скрипт. Встановлюється та налаштовується буквально за кілька хвилин.

Як встановити lightbox

І останній крок. Виведення зображень.
Виведення зображень робите так

Стандартний код виведення маленької картинки та посилання на велику картинку, тільки до посилання додається два параметри.
Ось приклад цього коду - при натисканні на картинці спливає велике зображення.

За такий ефект відповідає параметр data-lightbox="image".
Якщо у вас на сторінці багато зображень, ви можете зробити відкриття зображень без перегортання у спливаючому вікні, а можете поєднувати зображення і вони будуть перегортатися у спливаючому вікні.
Для об'єднання зображень потрібно використовувати одне ім'я для кожної групи картинок

Як бачите, всі картинки можна переглянути у спливаючому вікні, оскільки data-lightboxу всіх однаковий.
Якщо хочете розділити картинки, щоб вони не горталися, використовуйте такий код

Тепер кожна картинка відкривається окремо, тобто немає можливості перегорнути до наступної.

Що у модернізованій версії

І друге мало кому потрібне доповнення, це виняток дублів картинок.
За замовчуванням вимкнено, можна включити безпосередньо в скрипті, там же де і включається кнопка реального розміру.
У звичайному застосуванні скрипта дана функція завдає лише шкоди, використовувати її можна тільки в абсолютно безвихідних ситуаціях.

Зверніть увагу на три посилання порожні, тобто вони посилаються на великі зображення, але між тегами нічого немає, а одне посилання заповнене зображенням.
У результаті в браузері видно лише одну картинку, при натисканні на неї відкривається велика картинка і підтягуються всі картинки з незаповнених посилань і можна гортати.
І ось тут дивіться, у посиланнях є дві однакові картинки (виділені червоним) і коли гортаєте, то побачите дві однакові картинки.
Якщо в конкретному прикладі включити видалення дублів, то картинок, що дублюють, не буде.

Звичайно, такої ситуації не повинно бути, навіщо виводити дві однакові картинки, а потім видаляти їх. Але як не дивно, я зіткнувся з такою ситуацією, в одному інтернет-магазині у товару мали виводитися дублюючі фотки (там були хитрі заміни фоток через скрипти), і при перегляді через lightbox дублюючі фотки виглядали дуже неправильно. Ось там і знадобилося видалення дублів.

Коментарі

11.12.2014 Віктор
Скрипт дуже гарний. За допомогою data-title можна навіть описати картинку. Але у мене виникла проблема, у мене на сторінці стояв скрипт, який висував блок збоку при підключенні даного скриптувін у мене пропадає. Причому пропадає він, якщо підключені js скрипти. Думав через версію конфліктує немає не через них.

23.05.2015 Віктор
У мене не працює, коли
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
має такий вигляд. Без?ver=20150523142822
працює

25.05.2015 kaha
thanks a lot

29.06.2015 Андрій
Дуже дякую, за вашу працю! Все запрацювало практично з першого разу)

26.08.2015 Олександр
перепробував різні аналоги. без конфліктів цей став одразу. збільшення до оригін. розміру гут.якщо б ще мишкою брати і зрушувати поле картинки-взагалі капець

01.11.2015 Ігор
Вітаємо!
Чудова галерея. Величезне спасибі.
Тільки таке запитання:
У наведеному вище прикладі (3 картинки) зображення показуються зациклено. А в завантаженій версії lightbox-2.7.1 ця функція не працює. Під час перегляду останнього зображення кнопка не з'являється.
Підкажіть, будь ласка, у чому може бути причина?

14.11.2015 Антон

15.11.2015 Антон
на IOS та Андроїді затемнення екрану відбувається не на всю сторінку! в чому може бути проблема. У звичайному ЛайтБоксі – все ОК!

15.11.2015 Антон
на IOS та Андроїді затемнення екрану відбувається не на всю сторінку! в чому може бути проблема. У звичайному ЛайтБоксі – все ОК!

30.03.2016 Антон
Вітаємо!
А чи можна зробити так, щоб картинка відкривалася у більшому дозволі?

18.11.2016 Юра
Величезне дякую! Все працює чудово!

04.05.2017 Ігор
Велике дякую за скрипт! Дуже давно шукав щось схоже і легко встановлюється.
Тільки у мене чомусь під фотками незрозумілі написи з'являються Р 8 8 8 8 8 8 8 8 8 8

Може десь треба кодування виправити?

12.09.2017 Barsuk
Де ж ти був раніше! Цілий день витратив на те, щоб прикрутити видалення дублів))

У мене просто на головній сторінціпревьюшка основного зображення, а в неї внизу ще менше превьюшки додаткових, тому виникали дублі й у галереї.

Найпопулярнішою бібліотекою є Lightbox Javascript, яку ми багато років використовуємо на робочих столах, але не на мобільних платформах.

Надаю вашій увазі 14 Lightbox плагінів з підтримкою мобільних платформ.

PhotoSwipe

PhotoSwipe - Легкий, із сенсорною підтримкою, і найголовніше модульний плагін, що дозволяє прибирати непотрібні частини, які не потрібні. Він працює добре в мобільних браузерах. Ви можете змінювати зображення за допомогою руху пальця, якби це було стандартний додатокз плавними переходами.

• Необхідні бібліотеки:ні.
• Підтримка браузерів: IE8+, Chrome, Firefox, Safari, Opera, та інші мобільні браузери.
• Ліцензія:Ліцензія MIT

Magnific Popup

Magnific Popup є ще одним лайтбокс плагіном, розроблений тим же автором, що і PhotoSwipe, Дмитром Семеновів. Плагін поставляється у вигляді плагіна JQuery/Zepto, а також включає підтримку, яка відсутня у PhotoSwipe, такі як: підтримка відео, карт та Ajax. Це відмінна альтернатива для тих, хто вважає за краще мати більше можливостей під рукою.

• Необхідні бібліотеки: JQuery 1.9.1+ або Zepto.js
• Підтримка браузерів: IE7 (частково), .
• Ліцензія:Ліцензія MIT

SwipeBox

Swipebox плагін JQuery із підтримкою сенсорних жестів для мобільних платформ. Він також підтримує відео з Youtube та Vimeo, крім зображень. Swipebox легко встановити, і має кілька опцій для налаштування його налаштування. Я думаю, Swipebox занадто нагромаджений лайтбокс плагін для тих, хто не знає JavaScript.

Lightbox для Bootstrap

Спочатку Лайтбокс плагін відсутній у Bootstrap. Lightbox для Bootstrap виправляє це. Якщо ви використовуєте Bootstrap, рекомендується використовувати цю бібліотеку. Плагін добре інтегрується з Bootstrap.

• Необхідні бібліотеки: JQuery та Bootstrap модуль
• Підтримка браузерів: IE8 +, Chrome, Firefox, Safari, та Opera
• Ліцензія:ліцензія GNU

Nivo Lightbox

Nivo Lightbox — це лайтбокс плагін, що гнучко налаштовується. Різні опції дозволяють змінити зовнішній вигляд. Наприклад: тему, анімацію появи, та виду навігації.

• Необхідні бібліотеки: JQuery
• Підтримка браузерів:
• Ліцензія:Ліцензія MIT

ImageLightbox

ImageLightbox простий лайтбокс плагін без наворотів. Він використовується лише для зображення, звідси й назва. Ні відео, ні інший тип не підтримуються. Він також не потребує додаткової HTML-розмітки; тега є достатньою. Цей плагін простий у роботі.

• Необхідні бібліотеки: JQuery
• Підтримка браузерів: IE9 +, Chrome, Firefox, Safari, та Opera
• Ліцензія:Не визначена

Міні Lightbox

Ще один лайтбокс плагін без додатків. Бібліотека важить всього 2 кілобайти, і працює лише із зображеннями. Це ідеальний плагін, якщо ви розробляєте тільки для останньої версіїбраузера і немає потреби у підтримці відео або інших форматів.

• Необхідні бібліотеки: ні
• Підтримка браузерів: Internet Explorer 10+, Chrome, Firefox, Safari, та Opera
• Ліцензія:Ліцензія MIT

LightCase

Lightcase прекрасний лайтбокс плагін. Підтримує кілька видів анімацій, такі як: fade, elastic, zoom та scrolling. Крім того, він також підтримує різні видимедіа, включаючи Youtube Embed, HTML відео, SWF та форм введення.

• Необхідні бібліотеки: JQuery
• Підтримка браузерів: IE9 +, Chrome, Firefox, Safari, та Opera
• Ліцензія: GPL ліцензії

Featherlight

Featherlight базовий плагін, вагою 6 кілобайт для розробників і включає в себе тільки найнеобхідніше. Якщо вам потрібний лайтбокс ефект, наприклад, для групи зображень у галереї, ви можете увімкнути розширення галереї. Ви також можете розробити власне розширення для плагіна, щоб використовувати в своїх проектах.

• Необхідні бібліотеки: JQuery
• Підтримка браузерів: IE8 +, Chrome, Firefox, Safari, та Opera
• Ліцензія:Ліцензія MIT

LightLayer

LightLayer простий у використанні лайтбокс плагін. Плагін підтримує безліч опцій, JavaScript методита користувальницьких подій. Плагін працює із зображеннями, відео, картами.

• Необхідні бібліотеки: JQuery
• Підтримка браузерів: IE9 +, Chrome, Firefox, Safari, та Opera
• Ліцензія:Ліцензія MIT

LightGallery

LightGallery , інший лайтбокс плагін з великою кількістюфункцій. Він включає більш ніж 20 опцій для налаштування різних деталей лайтбокс ефектів.

• Необхідні бібліотеки: JQuery
• Підтримка браузерів: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android, та Windows Phone
• Ліцензія:Ліцензія MIT

FluidBox

Fluidbox лайтбокс плагін працює із зображеннями. Включає підтримку різне відображення, включаючи плаваюче зображення, зображення з абсолютної позиції, зображення з межами та відступами та галереї. Також існує WordPress плагін.

• Необхідні бібліотеки: 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 License