Только одно изображение нужно для работы метода. Нет нужны в том что бы делать две разные картинки для миниатюры и для увеличенного варианта. Код избавляет вас от рутинной работы по коду когда вы оформляете материал.
Можете посмотреть пример (демо)
Установка
1. Загрузить файлы с архива себе на сайт.
2. Между head и /head вставить код в нужном вам модуле:
Код
<link href="/css/lightbox.css" rel="stylesheet">
3. Перед /body в том же модуле вставить код:
Код
<script src="/js/lightbox.js"></script>
4. Заменить
$IMG_URL1$Где нужно увеличение на:
Код
<a href="$IMG_URL1$" data-lightbox="example-1">
<img class="example-image" src="$IMG_URL1$" alt="$TITLE$" />
</a>
<img class="example-image" src="$IMG_URL1$" alt="$TITLE$" />
</a>
На этом установка закончена.
Поддержка браузеров
- Internet Explorer.
Файл lightbox-plus-jquery.js включает jQuery v2.x и поддерживает IE 9+.
- Chrome
- Safari
- Firefox
- iOS Safari
- iOS Chrome
- Android Browser
- Android Chrome