skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

セクシーなLightBoxを実現するJavaScript「Sexy LightBox」

｜ ｜ ｜ ｜ ｜ ｜ ｜

LightBoxの亜種が様々出ています。
mootool.jsをベースとするSexy LightBoxもその一つです。
しかもセクシーという触れ込み。。。

使用方法 Sexy LightBoxからsexylightbox.js、sexylightbox.cssをダウンロードします。
また、mootools.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/mootools.1.2.js"></script>
<script src="http://yourdomain/sexylightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/sexylightbox.css" type="text/css" media="all">
<script type="text/javascript">
window.addEvent('domready', function(){
new SexyLightBox({
find:'sexylightbox', //classの指定
OverlayStyles:{'background-color':'red'},　//背景色
captionColor:'#FFF'});　　//キャプションの文字色
});
</script> あとは上記で指定したclassをリンク先に指定すれば完成です。
<a href="画像パス" title="キャプション" class="sexylightbox"><img src="サムネイル画像パス"></a>
セクシーなLightBoxを実現するJavaScript「Sexy LightBox」サンプル

記事作成：2008年09月18日

前の記事：JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
次の記事：画像を丸く輝かせるJavaScript「sphere.js」