web制作に役立つswipebox

タッチデバイスにも対応したLightboxを実装できる軽量jQueryプラグインのご紹介です。シンプルでタッチデバイスで使えるLightboxです。スワイプ動作も快適!
圧縮版で5KB程度ですので、web制作時に気軽に実装可能で役立ちます。

DEMO

まずjQuery本体とプラグインをwebサイトに読み込みます。

<script src="lib/jquery-1.9.0.min.js"></script>
<script src="source/jquery.swipebox.min.js"></script>

 
 
swipebox CSSスタイルを読み込みます。

<link rel="stylesheet" href="source/swipebox.css">

 

 
クラスを使用してデザインカスタマイズは自由自在ですね。
キャプションとしてtitle属性を使用しています。

<a href="big/image.jpg" class="swipebox" title="My Caption">
	<img src="small/image.jpg" alt="image">
</a>

 

 
“swipebox”クラスを持つすべてのリンクにswipeboxの動作をバインドします。

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

 

スマートフォンサイト、ホームページ作成に何かと便利。
ダウンロードはこちら
Swipebox