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

• Tag
• jQuery
• Responsive