jQuery

【jQuery】jQueryライトボックスプラグインLightZoom

July 25, 2018

LightZoomはjQueryライトボックスプラグイン。

How to use

Javascript
jQueryとLightZoomプラグインをインクルード。

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

CSS
headにインクルード。

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

HTML

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

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

Option

;( 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
 } );

} )( jQuery );

MIT

Download