Skip to content

Instantly share code, notes, and snippets.

@senooat

senooat/Javascript&jQuery　Lightbox(モーダルウィンドウ)「SmartPhoto.js」

Last active June 17, 2017 08:10
Show Gist options
  • Save senooat/7f41538600e3b3d573469e5cbf2213dc to your computer and use it in GitHub Desktop.
Save senooat/7f41538600e3b3d573469e5cbf2213dc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Javascript&jQuery　Lightbox(モーダルウィンドウ)「SmartPhoto.js」
//<head>に読み込み
<link rel="stylesheet" href="https://unpkg.com/smartphoto@0.5.9/css/smartphoto.min.css">
//</body>直前に読み込み
<script src="https://unpkg.com/smartphoto@0.5.9/js/smartphoto.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded',function(){
new smartPhoto(".js-smartPhoto");
});
</script>
//classで呼び出し、data属性「 data-group="○○"　」で分類
<a href="./assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal"/>
<img src="./assets/images/kuma.jpg" />
</a>
<a href="./assets/images/large-rakuda.jpg" class="js-smartPhoto" data-caption="camel" data-id="camel" data-group="animal"/>
<img src="./assets/images/rakuda.jpg" />
</a>
<a href="./assets/images/large-lion.jpg" class="js-smartPhoto" data-caption="lion" data-id="lion" data-group="animal"/>
<img src="./assets/images/lion.jpg" />
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment