jQuery
【jQuery】jQueryライトボックスプラグインLightZoom
July 25, 2018

LightZoomはjQueryライトボックスプラグイン。
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>
;( 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