jQueryのフロートウィンドウのプラグインで「Lightbox」は非常に有名ですが、スマートフォンやタブレットのUIには対応しきれていないのが難点でした。「Swipebox」ではスマートフォンでも画像幅が最適化されていたり、フリックに対応していたりと便利な設計になっています。
実装も「Lightbox」同様にクラス名を追加するだけなので実装が簡単です。

プラグインファイルのダウンロードと読込

まずはプラグインファイルの準備をします。swipeboxのページ下部にある「DOWNLOAD」からファイルをダウンロードし、圧縮ファイルを解凍します。「source」というディレクトリにある「jquery.swipebox.js」か「jquery.swipebox.min.js」のどちらかと「swipebox.css」のファイルを、FTPなどのアプリケーションでサーバーへアップロードしてください。

アップロードしたjs、cssとjQueryをヘッダー内で読み込みます。

[php classname=”sourcecode”]
<link rel="stylesheet" href="swipebox.css">
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1′></script>
<script src="jquery.swipebox.js"></script>
[/php]

jQuery、htmlの記述

swipebox用のソースコードを記述します。ここではclass属性「swipebox」内のaタグにプラグインが起動する記述をします。

【JavaScript】
[php classname=”sourcecode”]
<script type="text/javascript">
jQuery(function($) {
$(".swipebox a").swipebox();
});
</script>
[/php]

【HTML】
[php classname=”sourcecode”]
<div class="swipebox">
<a href="image1.jpg"><img src="thum1.jpg" alt="サンプル1"></a>
<a href="image1.jpg"><img src="thum2.jpg" alt="サンプル2"></a>
<a href="image1.jpg"><img src="thum3.jpg" alt="サンプル3"></a>
</div>
[/php]

サンプルはswipeboxのページで確認できます。