jQuery
【jQuery】モバイルデバイス向け画像ビューアSmartPhoto.js
May 19, 2017

SmartPhoto.jsはモバイルデバイス向けの最も使いやすいレスポンシブな画像ビューア。
<script src="https://unpkg.com/smartphoto@0.5.9/js/smartphoto.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/smartphoto@0.5.9/css/smartphoto.min.css">
<script src="/path/to/js/smartphoto.min.js"></script> <link rel="stylesheet" href="/path/to/css/smartphoto.min.css">
HTML
<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>
smartphoto.js
window.addEventListener('DOMContentLoaded',function(){ new smartPhoto(".js-smartPhoto"); });
jquery-smartphoto.js
$(function(){ $(".js-smartPhoto").smartPhoto(); });
MIT