Подключение Lightbox 2.6 к страничке сайта

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine
Установка скрипта галереи Lightbox 2.6

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

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

Инструкция по использованию.

ЧАСТЬ I: Подключение библиотеки.

1. Скачайте и распакуйте архив со скриптом отсюда

Скачать архив

2. В папке JS найдите файлы jquery-1.10.2.min.js и lightbox-2.6.min.js и скопируйте их в папку с вашими скриптами у вас на сайте.

3. Подключите эти скрипты к вашей страничке прописав между тегами <head></head> следующие строки:

4. В папке css найдите файл lightbox.css и скопируйте его в папку с вашими файлами стилей.

5. Подключите этот файл к вашей страничке прописав между тегами <head></head> следующие строки:

6. Из папки img скопируйте себе на сервер в папку с изображениями оформления вашего сайта следующие файлы: close.png, loading.gif, prev.png, и next.png. Эти файлы используются в файле стилей lightbox.css. По умолчанию файл стилей обращается к картинкам которые располагаются в папке img, которая имеет с папкой css одного и того же родителя. Если у вас папка изображений и папка стилей находятся в совершенно разных папках, то стоит изменить пути к картинкам в файле lightbox.css на соответствующие.

ЧАСТЬ II: Вставка картинок на странице.

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

Одиночные картинки.

Для каждой уникальной ссылки, которую должен обрабатывать скрипт, это значение должно быть уникальным (не должно повторяться).

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

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

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

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

Чтобы это реализовать добавьте ссылки так же как показано в примере для одиночных изображений, только для атрибута data-lightbox необходимо указать одно и то же значение:

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

Вроде бы все сделали, все должно работать, но:

Если из изображений формируем группу картинок, то при просмотре во всплывающем окне под картинками указывается «image 1 of 8»? а хотелось бы видеть что-то вроде этого «изображение 1 из 8».

Для этого в файле lightbox-2.6.min.js в строке 13 нужно заменить вот это:

на это

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

Ниже описание глюка и способ его исправить.

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

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

на

 

Смотрите видео-версию данного урока

Вот теперь все. Можно пользовать. Благодарю за внимание.

Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (4 оценок, в среднем: 5,00 из 5)
Загрузка...