Лайтбокс для сайта применяется на многих вэб-ресурсах, где используются изображения. Лайтбокс позволяет при клике на превью (уменьшенное изображение), показать его более крупную версию или просто - картинку в нормальном, крупном масштабе. Это удобно для карт, схем и фотографий мелких изделий или для просмотра деталей больших предметов или товаров.
Лайтбокс используется на всех сайтах интернет-магазинов для показа товара покупателю в увеличенном формате.
Скачать лайтбокс
Скачать лайтбокс последней версии вы можете здесь. Скачайте самую свежую версию библиотеки лайтбокс для установки на свой сайт.
Установка лайтбокс на сайт
Лайтбокс можно установить почти на любой сайт.
1. Для этого необходимо над закрывающим тегом head в дизайне сайта, подключить скрипт лайтбокса, прописав две строчки:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
Путь до папки со скриптами нужно указать свой.
2. Следующим шагом - подключаем стили для корректного отображения всплывающего окна с картинкой:
<link href="css/lightbox.css" rel="stylesheet" />
файл lightbox.css заливаем в свою папку CSS и соответственно меняем путь до файла.
3. Последнее что нужно сделать, это закачать изображения close.png, loading.gif, prev.png и next.png, расположенные в папке img. Это навигационные кнопки и указатели.
Чтобы Лайтбокс заработал
Чтобы лайтбокс заработал, нужно в ссылку с картинкой добавить атрибут data-lightbox, как в примере
<a href="img/image-1.jpg" data-lightbox="image-1" title="Мой рисунок">image #1</a>
Если у вас несколько рисунков, то вы можете изменив атрибут в ссылке на data-lightbox, сделать непрерывный просмотр (по бокам появятся стрелки для перелистывания.). Вот так:
<ul>
<li><a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a></li>
<li><a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a></li>
<li><a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a></li>
</ul>
Пример одиночного подключения - здесь (картинки в середине поста)
Пример с перелистыванием - здесь (галерея слева)
Лайтбокс для юкоз
В сайтах юкоз лайтбокс уже установлен и размещения скриптов не требует. Единственное что вам нужно знать, так это то, как его использовать в юкоз.
В юкоз это делается очень просто, достаточно добавить ссылке класс class="ulightbox" и все. Лайтбокс можно применить к блоку div или контактной форме.
Вот так это работает на сайтах юкоз.
