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