Slimbox2 без jquery — различия между версиями

Версия 13:04, 21 сентября 2017

• Библиотека: Легковесная версия Slimbox2 (без jQuery)
• Исходники: http://yourcmc.ru/git/vitalif-js/slimbox

Очень легковесная (5.4 кб JS в минифицированном виде, 9.7 кб в голом) библиотека для показа Lightbox’ов — всплывающих окон с увеличенной версией изображения — по клику на миниатюре, реализованный БЕЗ jQuery, но с поддержкой минимальных CSS-анимаций. Очень похожа на jQuery’евый Slimbox2, однако, реализация легковеснее, а анимация менее назойливая — в оригинале «окно» с изображением сначала меняет ширину, потом высоту, а потом снизу отдельно «выезжает» строчка с подписью. В моей версии все этапы анимации объединены, «окно» одновременно меняет ширину и высоту, а строчка с подписью вообще никуда не двигается, и анимация выглядит приятнее.

Простейший способ использования — скачать всю папку, подключить slimbox2.css, slimbox2.js и autoload.js, и прописать rel=lightbox части ссылок, например:

<a href="img-big.jpg" rel="lightbox"><img src="img-small.jpg" /></a>