SexyLightbox 2.2 設置方法
  1. TOP
  2. MEMO
  3. WEB
  4. Sexy Lightbox 2.2 設定方法

Sexy Lightbox 2.2 設定方法

Sexy Lightbox 2.2 とは？

Sexy Lightbox 2.2 と 2.1 の大きな違いは JQuery と Mootools のどちらかを選べることになった点です。

DOWNLOAD

Sexy Lightbox 2.2 は Codes.me の Sexy Lightbox 2.2 のページからダウンロードできます。または、こちらのページから。
　ダウンロードされたファイルはZIP形式になっているので解凍します。解凍するとjQuery用とMootools用に分かれているので、好きな方を使用してください。
ファイル構成は、Sexy Lightbox 2.1とほぼ同じなので、割愛します。

sexy-lightbox-2.2.zip

./ jQuery

　　　　jquery.easing.1.3.js

　　　　sexylightbox.v2.2.jquery.min.js

　　　　sexylightbox.v2.2.jquery.js

　　　　sexylightbox.css

　　　　global.css

　　　　...

　　　　./ sexyimages

　　　　　　　　...

./ Mootools

　　　　sexylightbox.v2.2.mootools.min.js

　　　　sexylightbox.v2.2.mootools.js

　　　　sexylightbox.css

　　　　global.css

　　　　...

　　　　./ sexyimages

　　　　　　　　...

この中で必要なのは、CSSファイル、JSファイル、sexyimagesフォルダです。
これ以外にMooTools又はjQueryライブラリーが必要になります。

準備

このままの設定では、画像を開いた時に背景画像などが表示されないことがあります。
フォルダの構造が元のサイトと同じでない限りは上手く表示しないと思います。
きちんと表示するためには、まず、sexylightbox.v2.1.mootools.js 又は、sexylightbox.v2.2.jquery.js を開いて 19行目あたりに「imagesdir : 'sexyimages',」とあると思いますが、それはsexyimageの場所を指しています。
この'sexyimage'の部分を自分の環境に合わせて、変更してください。（フルパスで記入することをおすすめします。）
minの方も直せる思いますが、よくわかりません。

Sexy Lightbox 2.2 の設置

Sexy Lightbox には MooTools 1.2.2 又は jQuery 1.3.2 が必要になるので、それがないとどうしようもないのですが無くても、AJAX Libraries API から読み込ませれば問題ありません。
今回は、AJAX Libraries API から持ってくることにします。

Mootools の場合
<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-2.2.zip には、SexyLightbox の実行ファイル sexylightbox.v2.2.mootools.js, sexylightbox.v2.2.mootools.min.js の２つが入っていますが、どっちを使ってもかまいません。 min が付いているファイルは、圧縮した JavaScript ファイルです。

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" />

こちらも sexylightbox.v2.2.jquery.js, sexylightbox.v2.2.jquery.min.js の２つが入っていますが、どっちを使ってもかまいません。

上記のコードを HTML の <head>内に貼り付けてください。
パスは自分の環境に合わせて変更してください。
さらに表示用のJavaScriptを記入します。

Mootools用
<script type="text/javascript">
	window.addEvent('domready', function(){
	SexyLightbox = new SexyLightBox();
	});
</script>
jQuery用
<script type="text/javascript">
	$(document).ready(function(){
    SexyLightbox.initialize();
    });
</script>

これを書き込めば、準備完了です。

SexyLightbox の使い方

使い方は v2.1と同様です。
SexyLightbox を使いたい場所で、下記のコードを入力します。titleに入力したものは、Sexy Lightbox が表示されたときに、一緒に表示されます。

<a href="imagen.jpg" title="Title" rel="sexylightbox">Image</a>

Lightbox のようにグループ化も可能です。その場合には、下記のように rel の sexylightbox に続けて [...] 内にグループ名を入力します。同じ文字のものは同じグループとして扱われます。

<a href="senorms.jpg" rel="sexylightbox[Image]">Image 1</a>
<a href="imagen.jpg" rel="sexylightbox[Image]">Image 2</a>
<a href="cualquiera.jpg" rel="sexylightbox[Image]">Image 3</a>

Sexy Lightbox のカスタマイズ

Mootools用
SexyLightbox = new SexyLightBox();
jQuery用
SexyLightbox.initialize();

Javascript の上記の部分を変更するだけで、Sexy Lightbox の表示方法を変更することができます。

Mootools用
SexyLightbox = new SexyLightBox({
OverlayStyles:{
'background-color':'#fff',
'opacity': 0.6
}
});
jQuery用
SexyLightbox.initialize({
OverlayStyles:{
'background-color':'#fff',
'opacity': 0.6
}
});

このように書いた場合、背景の表示（OverlayStyles）の色を黒（'background-color':'#fff'）にして、60％透過（'opacity': 0.6）します。
ということになります。
標準設定での Skin は Black を使うことになっていますが、white を使いたいときは、

Mootools用
SexyLightbox = new SexyLightBox({color:'white'});
jQuery用
SexyLightbox.initialize({color:'white'});

としてあげれば、white の Skin を使うことができます。

Mootools用
jQuery用

「Skin : Blue」と「Skin : Red」以外はSexyLightBox の設定を変えてあげれば様々な色でSexy Lightbox を使うことができます。
Skin : Blue - Download
Skin : Red - Download
Skin のファイルは解凍したら Sexy Lightbox が入っているフォルダの sexyimages に入れて使用してください。

画像以外のもの

Sexy Lightbox 2 では画像以外のものも表示できるようになりました。

インラインコンテンツ
<div id="myOnPageContent" style="display:none;">
...
</div>
<a href="#TB_inline?height=300&width=500&inlineId=myOnPageContent" rel="sexylightbox" title="872 blog :: 2008.07.20 Sunday">
インラインコンテンツ表示
</a>

上記の<div>...</div>のようにインラインコンテンツをHTMLの中に作ります。
場所は<body>内であればどこでもいいです。
この際、id を記入しますが、ページ内で重複しなければ何でもいいです。
style="display:none;" も忘れずに付けましょう。
この style は、「表示しない」というせっていなので、これを忘れるとインラインコンテンツがそのまま表示されてしまいます。

呼び出す場合は、画像と同じようにアンカーに、rel="sexylightbox" を入れて

#TB_inline?height=ウィンドウの縦の長さ&width=ウィンドウの横の長さ&inlineId=インラインコンテンツのid

と呼び出します。
表示した際に、ウィンドウよりも内容が大きい場合には、自動的にスクロールバーが表示されます。

また、インラインコンテンツ内から SexyLightbox を呼び出すことはできません。

インラインフレームコンテンツ
<a href="http://blog.872style.com?TB_iframe=true&height=450&width=900" rel="sexylightbox" >872 blog</a>

height と width の値は自由に変更してください。
アドレスに ? が付くようなアドレスでも、その後に ?TB_iframe=... と記入すればちゃんと表示できます。

Ajaxコンテンツ
<a href="sexylightbox/ajax_contents.html?height=250&width=400" rel="sexylightbox" title="AJAX コンテンツ">外部ファイル読み込み</a>

表示したいファイルのアドレスを指定してから、「?height=xxx&width=xxx」と入力します。インラインと違って、記入する物はかなり短くなります。

<a href="sexylightbox/login.html?height=160&width=300" rel="sexylightbox" >ログインフォーム</a>

ログインフォームも同様です。ログインフォームを SexyLightbox で表示すると、ちょっとカッコイイですね。

<a href="sexylightbox/youtube.html?height=385&width=480" rel="sexylightbox" >You Tube</a>

you tube のリンクは you tube にリンクしているわけではなく、コードを貼った HTML を表示しているだけです。

BACK