Скрипт для увеличенного просмотра изображений на странице – Lightbox Image Viewer 2.0.
Кликаете мышкой по картинке - и получаете ее увеличенное изображение в окне браузера. Скрипт поддерживает работу с отдельными картинками и с группой картинок, реализуя, таким образом, простую галерею.
Демонстрация
Демо 1 - обработка отдельных изображений
Демо 2 - создание мини галереи из группы изображений с кнопками "Вперед", "Назад"
Установка
Для работы Вам потребуется скачать архив со всеми необходимыми файлами. Скачать архив скрипта.
Распаковываете и устанавливаете в удобное место)) В этом скрипте придется ручками прописать пути к изображениям кнопки "Закрыть" (первоначально лежит в папке images/closelabel.gif) и заглушки при загрузке фотографий (первоначально лежит в папке images/loading.gif). Эти пути следует прописать в файле js/lightbox.js
Открываете файл и видите такие строчки (они в самом начале скрипта):
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
вот сюда в кавычки и заносите пути к нужным изображениям. Кстати, менять их не придется, если все папки скрипта будут лежать в корневой директории на сервере.
Следующим шагом заносим в тег <head></head> четыре строки (опять же следите за указанными путями к файлам, ведь ваша задача не просто вставить эти строки - а подключить требуемые файлы):
После этих простых махинаций остается самое приятное - заставить скрипт работать при нажатии на изображение, а для этого всего то нужно заключить изображение в тег <a href=""></a> с атрибутом rel="lightbox". Можно ориентироваться на шаблон:
<a href="myimage.jpg" rel="lightbox" title="заголовок к изображению" rev="http://valex.net.ru">image #1</a>
Атрибут href содержит путь к оригиналу изображения.
Необязательный атрибут title определяет заголовок изображения.
Необязательный атрибут rev делает "заголовок к изображению" ссылкой на указанный адрес.
Внутри тега <a></a> размещаем тег <img />, который, в идеале, должен указывать на уменьшенную копию изображения. Лично я уменьшенных копий не делал, а просто ограничил ширину картинки на странице, вот так:
<a href="myimage.jpg" rel="lightbox"><img src="myimage.jpg" width="100"></a>
Объединение изображений в группу для создания простой галереи
Здесь тоже все довольно просто! Оформляем изображения как описано выше, а после слова lightbox ставим квадратные скобки, в которых указываем произвольное имя галереи (или группы изображений - называйте как хотите)))
Вот вам пример объединения в группу трех картинок:
<a href="myimage1.jpg" rel="lightbox[group_name]"><img src="myimage1.jpg" width="100"></a>
<a href="myimage2.jpg" rel="lightbox[group_name]"><img src="myimage2.jpg" width="100"></a>
<a href="myimage3.jpg" rel="lightbox[group_name]"><img src="myimage3.jpg" width="100"></a>
Настройки
На наше счастье (или несчастье) их немного и все их можно менять в файле js/lightbox.js. В самом начале этого файла можно видеть такие строки:
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
var animate = true;
var resizeSpeed = 7;
var borderSize = 10;
Переменная animate может быть равна значению true - тогда открытие увеличенной картинки будет сопровождаться анимацией; или false - никакой анимации не будет.
Переменная resizeSpeed хранит значение скорости анимации в диапазоне от 1 до 10. 1 - медленная анимация, 10 - максимально быстрая анимация.
Переменная borderSize определяет ширину рамки вокруг изображения в пикселах.