スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？

SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーです。長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピンチアウトやダブルタップ等で直感的に閲覧することができます。

もちろん、画面の大きなPCでも利用できます。

https://appleple.github.io/SmartPhoto/ では、簡単に英語で利用方法が解説されていますが、こちらでは日本語で解説します。

1. 特徴
2. 使い方
3. オプション
4. メソッド
5. SCSSのカスタマイズ
6. ダウンロード
7. リンク

特徴

• スマートフォンでの閲覧時、写真の短辺側が画面の最大になるところまで拡大表示
• キーボード対応
• ピンチイン、ピンチアウト、スワイプ、ドラッグ対応
• 画像のグルーピング機能
• URLハッシュによる画像の表示機能

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/smartphoto.min.js"></script>

CDNを利用した読み込み

<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");
});

jQueryブラグイン版を使用する

また、jquery-smartphoto.jsを読み込むことで、jQueryのプラグインとしても使えるようにしています。

<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./js/jquery-smartphoto.min.js"></script>

$(function(){
  $(".js-smartPhoto").smartPhoto();
});

画像の短編側ではなく、長編側を画面幅いっぱいに表示することも可能です。その場合、オプションで「resizeStyle:'fit'」を指定します。PCで閲覧時には違いはありませんが、スマートフォンで表示の際にスクリーンサイズに画像がFitする形で表示されます。

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

オプション

メソッド

下記のようにインスタンスを生成することで、そのインスタンスを通していくつかのメソッドを実行することが可能です。

var mySmartPhoto = new smartPhoto(".js-smartPhoto-fit");

mySmartPhoto.zoomPhoto();

画像を拡大表示します

mySmartPhoto.zoomOutPhoto();

画像の拡大表示を終了します。

mySmartPhoto.gotoSlide(1);

画像をグループ表示している際に、そのグループの1番目の画像に移動します。

mySmartPhoto.addNewItem(element);

ギャラリーに新たな画像を登録します。

SCSSのカスタマイズ

ダウンロード

ダウンロードはこちらから行えます。

SmartPhoto.js をダウンロード

もしくは、npm、yarnを使ったインストールが可能です。

npm install smartphoto --save

yarn add smartphoto

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

const smartPhoto = require('smartphoto');

リンク

appleple.github.io/SmartPhoto

---

github.com/appleple/SmartPhoto

---