Для связи: dmitriyzhuravlev (гав-гав) yandex.ru

Персональный сайт Дмитрия Журавлева


Мой ЖЖ: dimadima.livejournal.com — там дубль, плюс коментов больше.

 
Flipper - скрипт для листания фотографий галереи
flipper.js - мой скрипт для листания фотографий на сайте. Скрипт - аналог так называемого лайтбокса (слайдер изображений Lightbox).

Для вставки на сайт надо в любое место 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 определяет цвет и прозрачность полей стрелок слева и справа на изображении

Раздел: JavaScript

Комментарии
(из-за долбаных спамеров урлы в коментах теперь писать нельзя)

Имя:

 
Комментарий:

 



Комментариев нет