セクシーな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」サンプル

sponsors

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

記事作成:
記事URL:

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