スワイプもOK。JQuery Swipebox.でギャラリー画像拡大

アイテムをクリックして、オーバーレイでギャラリー画像を拡大するlightbox系のプラグイン。
fancyboxを使っていたけれど、スマホのスワイプには対応してないし、2からは有償だし、1だとJQueryのバージョン低いし…。そもそもスマホで画像拡大したつもりが、小さくなっちゃった。ってことで別のを探してみたのでメモメモ。

Swipebox

ポイントは、「全画面」と「スワイプ」。
ついでにYouTubeもOK。

ベーシックな使い方ですが、

① Swipebox.よりファイル一式をダウンロード。

• Swipebox.

必要なのは、JQuery本体と、DLしたSwipebox > src の中にある、

• jquery.swipebox.js（またはjquery.swipebox.min.js）
• swipebox.css（またはswipebox.min.css）
• imgフォルダ（ナビアイコンとローディング画像）

② headerにJavascriptとCSSを読み込む。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="shared/js/jquery.swipebox.js"></script>
<link rel="stylesheet" type="text/css" href="shared/css/swipebox.css">

③ headerにSwipeboxのトリガーを記述

<script>
$(function () {
$(".swipebox").swipebox();
});
</script>

④ body 内にギャラリーのサムネイルを作り、リンク先に拡大画像を指定する。

<ul>
<li><a class="swipebox" rel="slide1" href="photo/img01.png" title="Caption1"><img src="photo/img01_thumb.png"></a></li>
<li><a class="swipebox" rel="slide1" href="photo/img02.png" title="Caption2"><img src="photo/img02_thumb.png"></a></li>
<li><a class="swipebox" rel="slide1" href="photo/img03.png" title="Caption3"><img src="photo/img03_thumb.png"></a></li>
<li><a class="swipebox" rel="slide1" href="photo/img04.png" title="Caption4"><img src="photo/img04_thumb.png"></a></li>
<li><a class="swipebox" rel="slide1" href="photo/img05.png" title="Caption5"><img src="photo/img05_thumb.png"></a></li>
</ul>

など。
④のaのクラス名が、③のトリガーのクラス名、
rel=” ” を同じにすることでグループ化され、スライドやスワイプができます。

a href= には、YouTube または Vimeo も指定できます。

<a class="swipebox" href="https://www.youtube.com/watch?v=81rQ06QzbWM">Youtube</a>

ひとつのトリガーでギャラリーセットを呼び出すことも。

<script type="text/javascript">
$( document ).ready(function() {
	$( '#gallery' ).click( function( e ) {
		e.preventDefault();
			$.swipebox( [
				{ href : 'image1.jpg', title : 'Caption1' },
				{ href : 'image2.jpg', title : 'Caption2' }
		] );
	} );
});
</script>

<a id="gallery" href="#">View gallery</a>

オプションは多くはありませんが、こちら→Swipebox. > options

• Demo