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

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

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

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

<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>

jQuery、htmlの記述

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

【JavaScript】

<script type="text/javascript">
jQuery(function($) {
    $(".swipebox a").swipebox();
});
</script>

【HTML】

<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>

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