SmartPhoto

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" href="https://unpkg.com/smartphoto@latest/css/smartphoto.min.css">
<script src="https://unpkg.com/smartphoto@latest/js/smartphoto.min.js"></script>

HTMLの記述

拡大表示したい画像をaタグで囲み、そのaタグのhref属性に拡大画像のパスを設定します。キャプションを入れたい場合は、そのaタグに対して、data-caption属性を指定します。また、data-group属性に同じ値を設定することで画像をグルーピングして表示することも可能です。

<a href="https://appleple.github.io/SmartPhoto/assets/images/large-kuma.jpg" class="js-smartPhoto" data-caption="bear" data-id="bear" data-group="animal">
  <img src="https://appleple.github.io/SmartPhoto/assets/images/kuma.jpg" />
</a>

JavaScript

document.addEventListener('DOMContentLoaded',function(){
  new SmartPhoto(".js-smartPhoto");
});