Лайтбокс галерея. Веб-дизайн и поисковая оптимизация

Lightbox - это JQuery-плагин, который используется для отображения изображения или любого другого контента в специально оформленном окне, которое показывается, как правило, на полупрозрачном затененном фоне поверх основного контента страницы.

Прежде чем устанавливать плагин на страницу и заниматься его настройкой, давайте взглянем на примеры:

Начало работы с Lightbox

Скачайте последнюю версию плагина (также доступна через Bower: bower install lightbox2 --save). После этого разархивируйте zip файл и загляните в урезанный рабочий пример, который находится в папке examples .

Готовые для установки Lightbox на вашей странице? Начните с подключения CSS и Javascript. Вы можете взять оба этих файла из папки dist . Вставьте следующий код между тегами head в вашей web-странице

Следующий код, подключающий плагин, вставьте перед закрывающим тегом body :

Убедитесь, что JQuery, который требуется Lightbox, также загружаются. Если вы уже используете JQuery (требуется JQuery 1.7 или выше) на странице, убедитесь, что он загружается до lightbox.js . Если у вас не подключена jQuery, воспользуйтель dist/js/lightbox-plus-jquery.js , в котором уже есть эта библиотека, либо скачайте последнюю версию с оф. сайта. Убедитесь, что четыре изображения, прописанные в lightbox.css расположени в указанном месте. Вы можете взять изображения из папки /dist/images .

Теперь займемся HTML-кодом. Добавьте атрибут data-lightbox к ссылке, содержащей изображения и к которым мы хотим применить наш плагин. В качествен значения атрибута используйте уникальное для каждого изображения имя. Например:

Image #1

Добавьте атрибут data-title , если вы хотите показать заголовок. Если у вас есть группа связанных изображений, которые вы хотели бы объединить в набор, используйте одинаковое значение в атрибуте data-lightbox для требуемых изображений. Например:

Img 2 Img 3 Img 4

Настройки Lightbox

Если вы хотите изменить какие-либо параметры по умолчанию, вызовите метод option:.

lightbox.option({ "resizeDuration": 200, "wrapAround": true })

alwaysShowNavOnTouchDevices По умолчанию: false
Если true , то левая и правая стрелки навигации, которые появляются при наведении мыши при просмотре набора изображений, будут всегода видимы на устройствах с поддержкой сенсорного ввода
fadeDuration По умолчанию: 500
Время, необходимое для исчезновения контейнера, в миллисекундах.
fitImagesInViewport По умолчанию: true
Если true , то пропорционально уменьшаем размер изображения чтобы картинка поместилось в области просмотра. Это избавляет пользователя от необходимости скроллить, чтобы увидеть все изображение.
maxWidth
Если задано, высота изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.
maxHeight
Если задано, ширина изображения будет ограничена этим значением (в пикселях). Соотношение сторон не будет соблюдаться.
positionFromTop По умолчанию: 50
Расстояние от верхней части окна просмотра до Lightbox-контейнера (в пикселях).
resizeDuration По умолчанию: 700
Время, в течение которого Lightbox-контейнер будет изменять свою ширину и высоту при смене изображений разного размера (в миллисекундах).
showImageNumberLabel По умолчанию: true
Если false , в текст будет указываться текущий номер изображения и общее количество изображений в наборе, например: "Изображение 2 из 4".
wrapAround По умолчанию: false
Если true , то при показе последнего изображения кнопка для показа следующего изображения не исчезает. Нажатие на нее приведет к показу первого изображения.

Скрипт организует просмотр изображений во всплывающем окне. Просмотр можно организовать либо по одному изображению, либо галереей, пролистывая картинки во всплывающем окне.
Самый простой и самый быстрый в установке скрипт. Устанавливается и настраивается буквально за несколько минут.

Как установить lightbox Скачиваете архив, распаковываете и закачиваете на сервер.
Далее встраиваете скрипт в свой сайт. В html код страницы прописываете код

И последний шаг. Вывод изображений.
Вывод изображений делаете так

Стандартный код вывода маленькой картинки и ссылки на большую картинку, только в ссылку добавляется два параметра.
Вот пример данного кода - при клике по картинке всплывает большое изображение.

За такой эффект отвечает параметр 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 и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!

30.03.2016 Антон
Здравствуйте!
А можно ли сделать так, чтобы картинка открывалась в большем разрешении?

18.11.2016 Юра
Спасибо огромное! Все работает отлично!

04.05.2017 Игорь
Огромное спасибо за скрипт! Очень давно искал что-то похожее и легко устанавливающееся.
Только у меня почему-то под фотками непонятные надписи появляются РР·РѕР±СЂР°Р¶РµРЅРёРµ 8 РёР· 8

Может, где-то нужно кодировку исправить?

12.09.2017 Barsuk
Где же ты раньше был! Целый день потратил на то, чтобы прикрутить удаление дублей))

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

Lightbox Plus является одним из самых популярных плагинов, реализующих Lightbox-эффект появления картинки (при клике на уменьшенную копию картинки большая открывается в этом же окне с красивым js-эффектом). Популярность плагина обуславливается двумя вещами: первое – он начинает работать сразу после активации и не требует дополнительной настройки картинок, а второе это то, что настроек в плагине много и при желании настроить плагин можно под любые задачи. Плагин умеет красиво открывать не только картинки, но также и видео, флешки и внешние ссылки. Обычно я не люблю менять работающий хорошо плагин на другой подобный, но тут не удержался и поменял старенький и морально устаревший на Lightbox Plus .

1. Распаковываем архив.

2. Копируем папку lightbox-plus в /wp-content/plugins/ .

3. Заходим в админку блога на вкладку "Плагины " и активируем плагин.

Как я уже сказал – сразу после активации плагин начинает работать и все картинки у вас уже будут открываться с Lightbox-эффектом. Но настроить плагин все-таки придется, так как надо будет перевести надписи вроде "Image 1 of 2" на "Картинка 1 из 2". Я хотел было перевести сразу весь плагин на русский язык, но бросил это дело на половине, так как, к сожалению, автор плагина забил на поддержку мультиязычности и большую часть плагина нельзя перевести через файлы локализации. Это неприятно по причине того, что настроек в плагине действительно много и разобраться в них сразу человеку, который не владеет английским языком достаточно сложно. Но плюс плагина в том, что обычному пользователю практически ничего настраивать и не надо.

В любом случае, настроить плагин вы сможете зайдя во "Внешний вид\Lightbox Plus ". Первое, что вы тут увидите это настройка стиля:

Плагин предлагает 14 встроенных стилей появления картинок. Это единственная настройка плагина, с которой стоит внимательно поиграться, чтобы стиль подходил к дизайну вашего сайта. Но будьте внимательны, так как по умолчанию все стили заточены под английский язык и после перевода слов "previous" и "next" на "предыдущая" и "следующая" эти слова в некоторых стилях могут наезжать друг на друга.

Это основная настройка плагина, а все остальные настройки находятся в разделе "Primary Lightbox Settings", который содержит подразделы:

Зайдите в подраздел "Base Settings", именно здесь надо переводить фразы:

Собственно, на этом настройка плагина закончена. Все остальные опции можно вообще не трогать – по умолчанию они подходят практически для любого сайта.

Как пользоваться плагином? Да очень просто – вставьте, например, в запись миниатюру картинки и большая картинка при клике на эту миниатюру будет открываться в выбранном вами Lightbox-стиле. Никаких дополнительных действий от вас не требуется. Вот так это будет примерно выглядеть:

Правда, маленькая оговорка - по умолчанию все картинки будут выводиться в галерее (то есть с кнопками "предыдущая" и "следующая"). Если вы не хотите, чтобы картинки выводились в галерее, то вам надо прописать rel тег для ссылки вида rel="lightbox" . То есть код ссылки должен быть:

Где "eva1 " это уникальный идентификатор картинки (любое уникальное значение). Если этот идентификатор прописать сразу у двух картинок, то у вас получится галерея из двух картинок. Например, код:

Выведет вот такую галерею:

Редактировать rel тег можно прямо в редакторе WordPress:

Все достаточно просто с картинками. Но как вывести видео или другой контент с эффектом Lightbox? Для этого сначала зайдите в настройки плагина и поставьте галку на "Use Secondary Lightbox":

После клика на "Save settings" появятся дополнительные настройки именно для вставки видео и прочего контента:

Понравился пост? Подпишись на обновления по или

Создание фотогалереи на сайте Фотогалерея LightBox2 - установка и настройка

В одной из предыдущих статей было рассказано о самой, наверное, популярной бесплатной фотогалерее - Lightbox , созданной на основе библиотеки скриптов jQuery . На базе Lightbox веб-дизайнеры разработали множество интересных клонов, но и первоначальный вариант до сих пор продолжает развиваться и с успехом применяется для фотогалерей на множестве сайтов. Рассмотрим его последнее обновление - плагин Lightbox2 , отличающийся небольшим размером и как всегда, простой установкой на сайт. При этом Lightbox2 имеет привлекательный дизайн, работает во всех браузерах и, что особенно приятно, корректно выводит большие изображения, сжимая их в соответствие с размером экрана пользователя.

Разработчик плагина Lightbox2 - Lokesh Dhakar , программист из Сан-Франциско. В настоящее время (2014 год) доступна версия Lightbox v2.7.1, которую и попытаемся установить на сайт. Пример разворачивания одиночного изображения c помощью LightBox2 показан на рисунке.

Установка фотогалереи LightBox2 Для установки фотогалереи LightBox2 сначала создадим на сайте новую папку, назвав её, конечно же, lightbox2 . Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней два скрипта (*.js ), вспомогательные картинки (папка img ) и файл CSS (*.css ). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега ... следующие строчки, указывающие пути к нашим новым файлам:

Важное замечание: если на вашем сайте используется несколько плагинов jQuery , то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
.
Не рекомендуется использовать на одной странице несколько разных версий jQuery , чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery , так как не все версии взаимозаменяемы.

Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. В теге ссылки дополнительно указываем rel="lightbox" - для одиночного изображения, а если хотим объединить в галерею несколько картинок, то через дефис любое выражение, одинаковое для всех, например, rel="lightbox-one"

и так далее.

Если необходимо делать надписи к изображениям, то размещаем их в title ссылок.
Пример простой фотогалереи из трех изображений показан на рисунке:

Важное замечание: если размер основного изображения (big.jpg ) больше размера экрана в браузере пользователя, то LightBox2 автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.

Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".

Настройка фотогалереи LightBox2

Для настройки фотогалереиоткройте файл lightbox.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом начале файла увидите доступные настройки:
this.fadeDuration = 500; //время открытия картинки мс
this.fitImagesInViewport = true; //подгонка под размер экрана true/false
this.resizeDuration = 700; //время разворачивания картинки мс
this.positionFromTop = 50; //отступ окна lightBox сверху экрана
this.showImageNumberLabel = true; //вывод номера картинки true/false
и т.д.

Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров, и после сохранения файла lightbox.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.

Некоторые параметры окна галереи, например, цвет фона и его прозрачность, цвет надписи и др. задаются в CSS-файле lightbox.css . Вспомогательные картинки (вперед, назад, загрузка, выход) расположены в папке img , и их также можно менять на ваше усмотрение.

О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в и в разделе "

Займемся созданием фотогалереи на основе плагина к jQuery называемого Lightbox . В результате у нас должно получится красивое отображение увеличенных изображений в отдельном Ajax окне со средствами навигации на следующее изображение или предыдущее.

Для начала обзаведемся самим скриптом плагина. Скачать весь архив можно по этой ссылке .

Как только скачали архив, залейте на свой хост следующие файлы сборки lightbox:

jquery.lightbox.js
lightbox.css

Теперь нужно подключить lightbox к странице. Для этого пропишите в теле HEAD (для пользователей UCOZ после тега) следующий код, предварительно заменив адреса на то местоположение, куда вы залили файлы:

.lightbox.js" type="text/javascript">
.css" type="text/css">

Если ваш сайт создан на базе UCOZ, то первую строку кода писать не надо. jQuery на UCOZ подключен по умолчанию.

Теперь подготовим изображения. В примере 1 альбом из 4-х изображений:

Изображения нужно обернуть в ссылку с определенным классом (в примере - lightbox-gal-1). Если это галерея, а не отдельное изображение, то для этих ссылок нужно установить атрибут REL (в примере - gallery1). Если на странице несколько галерей, то свойство REL для каждой галереи должен быть свой. Скажем, для первой галереи свойство REL имеет значение gallery1, а для второй галереи - gallery2.

Теперь lightbox нужно запустить. Для этого в теле HEAD пишем следующий код:

fitToScreen: true
});
});

Для работы lightbox этого достаточно. Все стилевое оформление делается через файл lightbox.css, который залили ранее. Там же можете изменить изображение перехода к следующему и предыдущему изображению (параметр #prevLink и #nextLink, соответственно).

И немного о параметрах, которые можно использовать при вызове lightbox . Эти параметры помогут изменить функционал вашей галереи.

Параметры прописываются через запятую внутри функции вызова lightbox . В примере использован один параметр. Это - fitToScreen. Существуют еще следующие параметры:

Параметр	Тип	Пояснение
Строка	Изображение, которое будет показано, пока рисунок грузится (бегунок).
fileBottomNavCloseImage	Строка	Изображение закрытия галереи.
overlayOpacity	0-1	Прозрачность фона.
borderSize	Число	Размер бордюра окна, которое будет разделять край окна и рисунок.
resizeSpeed	Число	Скорость изменения размера окна.
widthCurrent	Число	Размер окна по ширине до изменения размера.
heightCurrent	Число	Размер окна по высоте до изменения размера.
displayTitle	Логическое	Отображение заголовка изображения.
navBarSlideSpeed	Число	Скорость смены изображения.
displayHelp	Логическое	Показывать помощь по использованию.
fitToScreen	Логическое	Изменять размер окна под изображение.
disableNavbarLinks	Логическое	Показывать ссылки навигации.
loopImages	Логическое	Циклическое прокручивание.
imageClickClose	Логическое	Закрывать галерею при клике на картинке.
strings	Объект	Строки. Используется для перевода текста в окне на родной язык.

Объект strings имеет следуюшие параметры:

Если вам непонятно, как прописать эти параметры в скрипт lightbox , то вот пример:

$(document).ready(function(){
$(".lightbox-gal-1").lightbox({
fitToScreen: true,
imageClickClose: false,
fileLoadingImage: "/images/lightbox/loading.gif",
fileBottomNavCloseImage: "/images/lightbox/closelabel.gif",
strings:{
prevLinkTitle: "Предыдущий рисунок",
nextLinkTitle: "Следующий рисунок",
prevLinkText: "« Назад",
nextLinkText: "Вперед »",
closeTitle: "Закрыть галерею",
image: "Рисунок ",
of: " из "
}
});
});

На этом все. Удачного всем дня!

Вы можете присоедениться к моему микроблогу в Твиттере