LightZoom

Lightbox-плагин на jQuery
клик для увеличения клик для увеличения клик для увеличения клик для увеличения

Как использовать

Javascript

Подключить jQuery и плагин LightZoom. jQuery можно подключать как в шапке <head></head>, так и перед закрывающим тегом <body><body>. Плагин небоходимо подключать перед закрывающим тегом <body><body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="js/lightzoom.js"></script>

CSS

Подключить CSS стили в шапке <head></head>

<link rel="stylesheet" href="lightzoom/style.css" type="text/css">

HTML

Разместить на странице сайта нужные изображения. Для того, чтобы уменьшить скорость загрузки сайта, рекомендуется размещать подготовленные миниатюры. Изобажения обернуть в тег <a></a> с классом lightzoom, атрибут href которой должен содержать ссылку полноразмерную картинку.

<a href="ссылка полноразмерное изображение" class="lightzoom">
  <img src="ссылка на миниатюру" />
</a>

Запустить плагин

Привяжите lightzoom к каждой ссылке с классом lightzoom

<script type="text/javascript">
  jQuery('.lightzoom').lightzoom();
</script>

Настройки

;( function( $ ) {

 $( '.lightzoom' ).lightzoom( {
   speed:                 400,   // скорость появления
   imgPadding:            10,    // значение отступа у изображения
   overlayOpacity:        '0.5', // прозрачность фона (от 0 до 1)
   viewTitle:             false, // true, если надо показывать подпись к изобажению
   isOverlayClickClosing: false, // true, если надо закрывать окно при клике по затемненной области
   isWindowClickClosing:  false, // true, если надо закрывать окно при клике по любой области
   isEscClosing:          false, // true, если надо закрывать окно при нажатии на кнопку Esc
   boxClass:              '',    // позволяет задавать класс окну обертке (с версии 1.1.0)
   overlayColor:          '',    // позволяет задавать цвет фону (с версии 1.1.0)
   titleColor:            '',    // позволяет задавать цвет подписи (с версии 1.1.0)
 } );

} )( jQuery );
© 2016-2024 Заметки программиста