スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました

OSS

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

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

今回は JavaScript版 と jQuery版 を用意しました。
さらに、より多くの人に使ってもらえるように WordPress Plugin も準備を進めています。慣れない中で作っているので、これでいいのか分からない状況なので、ご意見ください。

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

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

デモ

まずは、どのようなものなのか画像をクリックして体験してみてください。

もし、この記事を PC でご覧ということであれば、 QR コードを利用してスマートフォンでアクセスしてみてください。ジャイロセンサーでスマートフォンを傾けると画像を動かすことができる（ジャイロセンサーを利用しない設定も可能です）ようにもなっています。

特徴

  • スマートフォンでの閲覧時、写真の短辺側が画面の最大になるところまで拡大表示
  • キーボード対応
  • ピンチイン、ピンチアウト、スワイプ、ドラッグ対応
  • 画像のグルーピング機能
  • 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'
    });
});

オプション

arrows 「前後リンク」を表示するかどうか デフォルト：true
nav イメージナビゲーションを表示するかどうか デフォルト：true
useOrientationApi 加速度センサーを使用するかどうか デフォルト：true
resizeStyle スマホで閲覧時に画像サイズの短辺を画面幅に合わせる（fill）か、長編を画面幅に合わせる（fit）か デフォルト：'fill'
animationSpeed 次の画像に遷移する際のアニメーションスピード デフォルト：300
forceInterval 画像の位置を更新する頻度 defaultは (10/1000秒）に一回 デフォルト：10

メソッド

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

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

mySmartPhoto.zoomPhoto();

画像を拡大表示します

mySmartPhoto.zoomOutPhoto();

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

mySmartPhoto.gotoSlide(1);

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

mySmartPhoto.addNewItem(element);

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

SCSSのカスタマイズ

$animation-speed次の画像に遷移する際のアニメーションのスピードデフォルト：0.3s
$animation-functionアニメーションのイージングデフォルト：ease-out
$backdrop-color画像閲覧時の背景色デフォルト：rgba(0, 0, 0, 1)
$header-color画像閲覧時のヘッダーの色デフォルト：rgba(0, 0, 0, .2)

ダウンロード

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

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

シェアする

関連記事

カテゴリー

タグクラウド

ブログ内検索

関連記事

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い／UIデザインのご相談／デジタルメディアの総合プロデュース／パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン

お問い合わせ

資料ダウンロード

何について知りたいですか？