画像ビューワー

業務システムの中でも、商品や従業員、店舗什器などさまざまな情報のいち構成要素として画像を取り扱うケースは多いでしょう。画像自体が主役だったり、印象的なアイキャッチや背景を覆うような画像ではなく、いち要素としての画像は大抵の場合サムネイルとして他のテキスト情報などどともに表示しておくことになります。

最初は縮小されたサムネイル表示で占有スペースおよび情報量を制限しておき、ユーザー求めに応じて拡大表示でより多くの情報を表示する、というユーザーが行き来できる段階的な情報開示で、UIをシンプルに保つことができます。また同じグループに属する複数の画像間は拡大表示の状態で前後に移動できるようにすることで探索を容易にします。

画像の拡大詳細表示のためにPhotoswipeをが利用できます。Photoswipeは、PCとタッチデバイスの両方に対応していて、キャプション表示、画像ダウンロード、左右フリックでの画像移動や上フリックでのモーダル離脱の機能を備えたjQueryプラグインです。詳しくはPhotoswipeの公式ドキュメントを参照してください。

Photoswipeを起動するためのjsを定義します。

// PhotoSwipeを起動する
initPhotoSwipeFromDOM( '.my-gallery' ) ;

//Photoswipeのイメージクリック時の処理
$('.my-gallery').on('click', 'a', function(){
  $('<div class="modal-backdrop op8"></div>').appendTo(document.body).hide().fadeIn();
  $('body').addClass('modal-open');
});

画像を設置するHTMLをマークアップします。一つのfigure要素に対して、一つの画像を配置することができます。必要な要素は、「オリジナル画像のURL」、「オリジナル画像のサイズ」、「サムネイル画像のURL」、「キャプション」、の4点です。なお、.mygalleryコンテナを増やすことで、複数グループの画像ギャラリーを配置することができます。

<div class="my-gallery">

  <figure>
    <a href="{画像のURL}" data-size="{画像のサイズ}">
      <img src="{サムネイル画像のURL}" alt="{画像下に表示されるキャプション}" />
    </a>
    <figcaption>サムネイル下に表示されるメッセージ</figcaption>
  </figure>

  <figure>
    <a href="./photo.jpg" data-size="800x600">
      <img src="./photo-thumbnail.jpg" alt="写真の説明でーす。" />
    </a>
    <figcaption>サムネイル下に表示されるメッセージ</figcaption>
  </figure>

</div>