Swipebox　タッチ可能なjQueryライトボックス

TSAgency

9年前

皆さん、サイトの画像・動画をクリックすると拡大された画像や動画のページではなく、ページ自体が暗転して拡大した画像や動画がポップアップするサイトを見たことはありませんか？

英語の手順はネットで見たけど、日本語が無くて困っている…。そんな声にお応えして、日本語版を作ってみました。

Swipeboxとは？

そもそもSwipeboxとはデスクトップ、モバイル、タブレット向けjQueryライトボックスのプラグインです。今まではデスクトップ上でしか行えなかったライトボックスの機能をモバイルやタブレット向けにも可能にしてくれる優れたプラグインなんです。

まずは、Swiftboxをダウンロードしましょう！：
リンク先の一番下のDownloadからダウンロードできます！
http://brutaldesign.github.io/swipebox/

主な機能は：

モバイル用スワイプジェスチャー
デスクトップ用キーボードナビゲーション
jQueryのフォールバックのあるCSSトランジション
UIアイコン用Retinaサポート
簡略化されたCSSカスタマイズ

対応しているのは：

Chrome、Safari、Firefox、Opera、IE9+、IOS4+、Android、Windowsのスマートフォン

基本的な使用方法：

それではここから基本的な使い方をご説明しましょう。

Javascript

<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

headタグ、あるいはbodyのクロージングタグの手前に、jQueryとSwipeboxのスクリプトを含める。

CSS

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

headタグにSwipeboxのCSSスタイルを含める。

HTML

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

リンクには特定のクラスを使用し、タイトル属性をキャプションとして使用する。

プラグインを実行する

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

全てのリンク上のSwipeboxパターンを「Swipebox」クラスでバインドする。

上級編：

慣れてきた方、あるいは基本的な使い方をすでにご存じの方に向けて、上級編をお教えします。

ギャラリー

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
<img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
<img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
<img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
<img src="small/image4.jpg" alt="image">
</a>

ギャラリーから切り離すために、rel属性をリンクに追加することができる。

動画サポート

href属性にYouTubeやVimeo動画のURLを貼り付けるのみ。スクリプトが自動的にYouTubeのURLなのかVimeoのURLなのかチェックし、Swipebox上で動画を開く。

<a class="swipebox-video" rel="0000" href="http://0000.com/">My Videos</a>

スライドは動的に読み込まれる

Swipeboxに配列オブジェクトを通すことで、動的なギャラリーに設定することができる。

$( '#gallery' ).click( function( e ) {e.preventDefault();$.swipebox( [
{ href:'big/image1.jpg', title:'00000' }, 
{ href:'big/image2.jpg', title:'00000' }
] );
} );

状態を開いて確認

if ( $.swipebox.isOpen ) {
// do stuff
}

オプション

<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useCSS : true, // false will force the use of jQuery for animations
useSVG : true, // false to force the use of png for buttons
initialIndexOnArray : 0, // which image index to init when a array is passed
hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
hideBarsDelay : 3000, // delay before hiding bars on desktop
videoMaxWidth : 1140, // videos max width
beforeOpen: function() {}, // called before opening
afterOpen: null, // called after opening
afterClose: function() {}, // called after closing
loopAtEnd: false // true will return to the first image after the last image is reached
} );
} )( jQuery );
</script>

いかがでしたか？今まで具体的な手順が分からなかった方も、これで少しはお役に立てれば幸いです。
数多くの画期的で役立つ機能は存在しますが、その多くが英語であるため、今後とも皆さんのお役にたちそうなものがありましたら、随時日本語版を提供していきたいと思います！

Follow me!