非常に美しいLightBoxスクリプト「Sexy LightBox」-JavaScript Library Archive

非常に美しいLightBoxスクリプト「Sexy LightBox」

配布元：Sexy LightBox
ライセンス：MITライセンス

Sexy LightBoxは非常に美しい動きをするLightBox系のJavaScriptライブラリだ。

ベースエンジンはMootoolsを利用するか、jQueryを利用するか選択できる為、現在利用しているライブラリに合わせて柔軟に利用することができる。

利用方法

mootoolsを利用する場合はmootools本体と配布サイトからダウンロードした「sexylightbox.v2.2.mootools.js」と「sexylightbox.css」をhead要素などで読み込む。配布ファイルに同梱されている「sexyimagesフォルダ」も利用したいファイルと同じ階層に配置しておこう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Sexy LightBoxはscript要素などで以下のJavaScriptを実行することにより利用可能になる。

window.addEvent('domready', function(){
	SexyLightbox = new SexyLightBox();
});

画像表示のトリガーにしたいa要素のhref属性に拡大後の画像のURL、title要素に画像の説明、rel属性に「sexylightbox」を記述することによりSexy LightBoxが利用できる。

<a href="image-1.jpg" title="Sexy LightBoxサンプル" rel="sexylightbox"><img src="image-1-s.jpg" alt="Sexy LightBoxサンプル" /></a>

サンプル

jQueryと利用する場合は読み込むライブラリと実行スクリプトを以下のようにすることで利用可能だ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
	SexyLightbox.initialize();
});
</script>

サンプル

jQuery本体以外にjQuery Easing Pluginも読み込まれている点に注意が必要だ。

グループ化

<a href="image-1.jpg" title="Sexy LightBoxサンプル1" rel="sexylightbox[foo]"><img src="image-1-s.jpg" alt="Sexy LightBoxサンプル" /></a>
<a href="image-2.jpg" title="Sexy LightBoxサンプル2" rel="sexylightbox[foo]"><img src="image-2-s.jpg" alt="Sexy LightBoxサンプル" /></a>
<a href="image-3.jpg" title="Sexy LightBoxサンプル3" rel="sexylightbox[foo]"><img src="image-3-s.jpg" alt="Sexy LightBoxサンプル" /></a>

sexylightbox[foo]のようにrel属性の末尾に任意のグループ名をつけることによりグループ化し、ギャラリーとしても利用することができる。

サンプル

背景色の変更

実行スクリプトにOverlayStylesを与えることにより背景色や背景の透過度も容易に変更できる。

$(document).ready(function(){
	SexyLightbox.initialize({
		OverlayStyles:{
			'background-color':'#000',
			'opacity': 0.5
		}
	});
});

サンプル

ライトボックスの色の変更

デフォルトでは黒色のウィンドウが開くが実行スクリプトにcolor:’white’を加えることによりウィンドウの色を白色に変更できる。

$(document).ready(function(){
	SexyLightbox.initialize({
		OverlayStyles:{
			'background-color':'#000',
			'opacity': 0.5
		},
		color:'white'
	});
});

サンプル

ウィンドウの色はデフォルトの黒、オプションの白の2色が用意されている。