すてきな気分〜ナイスフィーリングブログ〜

これは使える!レスポンシブ対応のlightbox「Swipebox」

最近はレスポンシブの風が押し寄せて来て、プラグインもレスポンシブ対応のモノを使うしかなくなって来た。
超定番プラグインlightboxも色々と出されているけど、各種端末対応するなら「Swipebox」がものスゴくおすすめ!
その名の通り、グループ化したイメージをスワイプで遷移させることができる!
やはりタッチデバイスではスワイプでしょっ!(笑)
ちなみにPCではカーソルでも動くので、至れり尽くせりといった感じで非常に重宝です♪

実装は簡単で、ダウンロードしたjquery.swipebox.jsとswipebox.cssを、jQuery共々リンクし、下記の感じでjsを書く。

jQuery(function($) {
	$(".swipebox").swipebox({
		useCSS : true,
		hideBarsDelay : 3000, //バーが非表示になる時間
	});
});

そして画像リンクに、

<a href="#" class="swipebox" rel="gallery-1"><img src="#"></a>

と言う感じで書き加える。ちなみに「rel=”gallery-1″」はグループ化の場合。
するとこんな感じで動きます。
いつも思いますけど、こういう素晴らしいものを作ってくださる方々に感謝感謝です!

ちなみに「Nivo Lightbox」というレスポンシブ対応のlightboxがありますが、なぜかiOSでは動きませんでした・・・惜しい〜 (-_-)

Pocket

トラックバック

このエントリーのトラックバックURL:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です