タッチデバイスにも対応したLightboxを実装できる軽量jQueryプラグインのご紹介です。シンプルでタッチデバイスで使えるLightboxです。スワイプ動作も快適！
圧縮版で5KB程度ですので、web制作時に気軽に実装可能で役立ちます。
まずjQuery本体とプラグインをwebサイトに読み込みます。
1 2 | <script src="lib/jquery-1.9.0.min.js"></script><script src="source/jquery.swipebox.min.js"></script> |
swipebox CSSスタイルを読み込みます。
1 | <link rel="stylesheet" href="source/swipebox.css"> |
クラスを使用してデザインカスタマイズは自由自在ですね。
キャプションとしてtitle属性を使用しています。
1 2 3 | <a href="big/image.jpg" class="swipebox" title="My Caption"> <img src="small/image.jpg" alt="image"></a> |
“swipebox”クラスを持つすべてのリンクにswipeboxの動作をバインドします。
1 2 3 4 5 | <script type="text/javascript">jQuery(function($) { $(".swipebox").swipebox();});</script> |
スマートフォンサイト、ホームページ作成に何かと便利。
ダウンロードはこちら
Swipebox
