Pickupニュース

完結:モバイルファースト時代のlightboxの在り方
コラム

完結:モバイルファースト時代のlightboxの在り方

lightGalleryで全てが解決しました!
とにかく今、一番良いlightbox系のjQueryプラグインは何か、とにかく調べ回りました。その結果、2016年11月現時点で入手可能なものとして最高なプラグインを見つけました。それがlightGalleryです。

最高のlightboxプラグインは何か?

これまでモバイル環境下では、PCでの閲覧を前提としたlightbox系の作り方ではユーザーの操作性を損なう可能性があることを述べて参りました。そこで、今現在リリースされているlightbox関係のプラグインの中で最適なものは何かを検証していました。
先日は、Colorboxを使って、ブラウザの履歴を管理する方法を紹介しました。

続:モバイルファースト時代のlightboxの在り方

pushStateでブラウザの「戻る」に対応!
先日、スマートフォンでのlightbox系プラグインを使用してスライドショーを表示する際は、誤って「戻る」操作をしてしまうと、元のページのさらに前のページに戻ってしまう問題点?を指摘しました。その解決策がわかりましたので、ご紹介致します。

そんな中、見つけたのがlightGalleryです。

lightGalleryの特徴

他では余り見られなかったlightGalleryの特徴として、
  • モバイルデバイスのタッチ操作サポート
  • デスクトップPCのマウスドラッグサポート
  • ダブルクリック/ダブルタップで画像のオリジナルサイズを表示
  • ズームサポート
  • ブラウザの履歴を管理するAPI
が挙げられます。
懸念であったブラウザの「戻る」問題に関しても、各スライドの表示時のURL末尾に#(ハッシュID)~を追加してブラウザの履歴を管理することが出来ます(要Hashプラグイン)。
lightGallery hash plugin lets you to provide unique url for each gallery images. lightGallery will record slide history and allows you to travel to previous slides via browser back button.If you have multiple galleries on one page you have to provide unique id’s for each gallery via galleryId setting.

商用利用では1プロジェクト辺り$18(約2,000円)かかりますが、費用対効果としては非常に良いと思います(ライセンスをご確認下さい。)。

lightGalleryの使い方

こちらのハッシュ機能について解説記事を書きました。
lightGallery:多機能lightbox系のjQueryプラグイン | (9) ハッシュプラグインの導入と基本設定 | Web技術指南書

また、その他のlightGalleryの使い方をこちらでまとめています。ご興味のある方は是非ご確認下さい。

lightGallery

多機能lightbox系のjQueryプラグイン
lightGalleryは非常に豊富なオプション設定が用意されているlightbox系(サムネイル画像をクリックしてモーダルウィンドウを開き、拡大して表示)のjQueryプラグインです。他の同類のプラグインと比較しても、スマートフォンでのスワイプ操作、ページ履歴でブラウザの「戻る」「進む」に対応、画像の拡大・縮小・ダウンロードなど、その多機能性は追随を許しません。

追記

lightGalleryはjQuery版と、非依存版の2つがリリースされています。利用する際は、間違えないようにご注意ください。
jQuery版はこちら。
lightGallery
非jQuery依存版はこちら。
lightgallery.js

コメントを残す

記事ランキング