Pickupニュース

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

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

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

Colorboxの使い方

まず、今回使用しているlightbox系のプラグインはColorboxになります。
Colorboxの使い方につきましては、こちらの記事にまとめましたので是非ご確認下さい。

Colorbox

軽量Lightbox系jQueryプラグイン
ColorBoxは10kb(圧縮版)と、非常に軽量なlightbox系のjQueryプラグインです。

Colorboxでブラウザの「戻る」に対応する

pushStateによってブラウザに擬似的な履歴を追加し、ブラウザの「戻る」操作をした際に元のページに戻ることが出来ます。

HTMLマークアップ

HTMLCopy
<a class="colorbox" title="これはColorboxのサンプルです。" href="http://placehold.jp/500x500.png?text=画像1"><img src="http://placehold.jp/100x100.png?text=画像1" /></a> <a class="colorbox" title="これはColorboxのサンプルです。" href="http://placehold.jp/500x500.png?text=画像2"><img src="http://placehold.jp/100x100.png?text=画像2" /></a> <a class="colorbox" title="これはColorboxのサンプルです。" href="http://placehold.jp/500x500.png?text=画像3"><img src="http://placehold.jp/100x100.png?text=画像3" /></a> <a class="colorbox" title="これはColorboxのサンプルです。" href="http://placehold.jp/500x500.png?text=画像4"><img src="http://placehold.jp/100x100.png?text=画像4" /></a>

JavaScriptの記述

JavaScriptCopy
$(".colorbox").colorbox({ rel:'colorbox', maxWidth:'90%', maxHeight:'90%', onLoad: function() { if(!document.URL.match(/#colorbox/)){ history.pushState(null, "Colorbox", '#colorbox'); window.onpopstate = function(event) { $.colorbox.close(); }; } } });
これで、Colorboxを実行時にURLの末尾に#colorboxが付け加わり、ブラウザの履歴に残ります。そのため、Colorbox表示中にブラウザの「戻る」操作をしても元のページに戻ります。

デモ

「戻る」に対応したColorboxのデモを用意致しましたので、実際にブラウザを操作してご確認下さい。比較として通常操作のColorboxのデモも用意しております。

ブラウザの「戻る」に対応したデモはこちらから

デモ


(2016年11月15日追記)
続きを書きました。

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

記事ランキング