Скачать
Очень крутой стильный lightbox плагин, который поддерживает обработку картинок, фреймов, роликов с популярных видеоресурсов, флеш и многое другое. Установка и настройка вообще элементарны до безобразия, а возможность выбора из трёх различных скинов, адаптивный современный дизайн, функция автоматического слайдшоу и бог знает что ещё, делают этот плагин просто щедевром
Для начала посмотрите
ДЕМО
Моё тестирование в редакторе:
КЛИК
Установка:
1#: На нужных страницах между head и /head вставьте:
|
<link rel='stylesheet' href='/css/lightview.css'> |
2#: На этих же страницах в самый низ перед /body поместите:
|
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script> <script src='/js/spinners.min.js'></script> <script src='/js/lightview.js'></script> |
3#: Использовать всё это чудо очень просто:
|
<a href="ССЫЛКА_НА_КАРТИНКУ" class="lightview" data-lightview-options="skin:'mac'" data-lightview-group="mixed"> Открыть картинку </a> <a href="ССЫЛКА_НА_КАРТИНКУ" class="lightview" data-lightview-options="skin:'dark'" data-lightview-group="mixed"> Открыть картинку </a> <a href="ССЫЛКА_НА_КАРТИНКУ" class="lightview" data-lightview-options="skin:'light'" data-lightview-group="mixed"> Открыть картинку </a> |
Как вы уже поняли, для того, чтобы картинка была обработана скриптом, достаточно задать ей
class="lightview"
Чтобы картинки находились в одной галерее, достаточно для ссылок на картинки дописать параметр
data-lightview-group="НАЗВАНИЕ_ГРУППЫ"
Для того, чтобы задать нужный скин, достаточно для ссылки на картинку дописать параметр
data-lightview-options="skin:'mac'". Доступен выдор из трёх скинов: 'mac', 'dark' и 'light'
Чтобы обработать фрейм или ролик с видеоресурса, достаточно для ссылки дописать параметр
data-lightview-type="iframe":
|
<a href="https://imapo.ru" class="lightview" data-lightview-type="iframe" data-lightview-group="thumbnail-icon-example">Айфрейм</a> |
Остальные примеры использования можете посмотреть
ЗДЕСЬ
Осталось лишь залить три папки из прикреплённого архива в корень вашего сайта
Возникли вопросы? Задайте их в комментариях
Автор публикации
12
Я не понял вашего вопроса, но постараюсь на него ответить...
Комментарии: 393Публикации: 1095Регистрация: 27-08-2018
Здравствуйте. Как сделать что б на экранах мобильных устройств галерея разворачивалась на весь экран?
К сожалению, у данной галереи нет такой функции