Для вставки на сайт надо в любое место html-кода страницы вставить код:
<script src="flipper.js"></script>
А картинкам добавить атрибут data-flipper. Пример кода:
<a href="1big.jpg" target="_blank"><img src="1small.jpg" class="smallImgForUrl" data-flipper></a>
<a href="2big.jpg" target="_blank"><img src="2small.jpg" class="smallImgForUrl" data-flipper></a>
<a href="3big.jpg" target="_blank"><img src="3small.jpg" class="smallImgForUrl" data-flipper></a>
<script src="flipper.js"></script>
У документа должен стоять современный доктайп HTML5:
<!DOCTYPE html>
Скрипт становится рабочим сразу после загрузки всего html-документа (используется событие DOMContentLoaded).
Скрипт не требует никаких сторонних библиотек (вроде jQuery), писал на "чистом" джаваскрипте.
Работоспособность в Internet Explorer проверял только в 11-й версии. В 8-й версии точно не работает (слишком старый и ничего нормального не поддерживает). Зато работает нормально в старой, но по-прежнему мной любимой Opera Presto.
Никаких ограничений на использование скрипта нет: редактируйте и копируйте в своё удовольствие.
Что умеет скрипт:
- при запуске по щелчку на миниатюре изображения покрывает весь сайт полупрозрачной "вуалью" и показывает увеличенное изображение
- работает с миниатюрами, у которых в теге img есть атрибут data-flipper
- ищет ссылку на увеличенное изображение в атрибуте href тега a, который должен оборачивать тег img
- если img не обёрнут в тег a, то увеличенным изображением считается то, что указано в атрибуте src у этого img
- оборачивать img не обязательно сразу в тег a, теги-посредники допустимы: <a><div><div><img></div></div></a>
- параметры preloadPrevBoolean и preloadNextBoolean заранее загружают следующее и предыдущее изображения (через микрокартинки шириной и высотой 1 пиксель)
- не используется раздражающая анимация перехода к другому изображению: изображение появляется сразу, как загрузится
- учитывает то, насколько перемотана вниз страница и открывает увеличенное изображение именно там, где сейчас показывается видимая часть страницы
- работает при любом размере экрана, т.е. на мобильных экранах тоже работает
- листать можно стрелками клавиатуры или кликами справа и слева на изображениии
- выход из просмотра клавишей Esc или кликом на "вуали"
- если увеличенное изображение превышает экран по ширине, то оно подгоняется по ширине, горизонтальная прокрутка исключена
- выбор как обрабатывать превышение высотой изображения высоты экрана через переменную maxHeightIsScreenHeight: true - это подгон по высоте, false - высота не ограничивается (в этом случае большое изображение может заходить вниз за высоту экрана)
- параметр colorForArrowDivs определяет цвет и прозрачность полей стрелок слева и справа на изображении
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)
Комментариев нет