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

Sexy Lightbox 2.1 設定方法

Sexy Lightbox 2.1 とは？

　Sexy Lightbox 2.1は Lightbox のように画像を表示する MooTools のプラグインです。
Lightboxとの大きな違いは、表示方法がSexyなこと。画像枠もLightboxのように角張ってなく、角丸です。

DOWNLOAD

Sexy Lightbox 2.1 は Codes.me の Sexy Lightbox 2 のページの中央あたりに、 Descargar の下に Descarga sexy-lightbox-2.1.zip とあるので、そこからダウンロードできます。Download ではないので、注意。（2009/4/17 の時点で v2.1）
　ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

sexy-lightbox-2.1.zip

global.css

sexylightbox.css

data.html

index.html

login.html

maqueta.html

sexylightbox.v2.1.mootools.js

sexylightbox.v2.1.mootools.min.js

./ sexyimages

　　./ black

　　　　bgSexy.gif

　　　　loading.gif

　　　　404.png

　　　　bgSexy.png

　　　　SexyBtLeft.png

　　　　SexyBtRight.png

　　　　SexyClose.png

　　./ white

　　　　bgSexy.gif

　　　　loading.gif

　　　　404.png

　　　　bgSexy.png

　　　　SexyBtLeft.png

　　　　SexyBtRight.png

　　　　SexyClose.png

./ images

　　ryu.gif

　　yo.gif

　　clapclap.jpg

　　homerin2.jpg

　　logocoders.jpg

　　neuquen.jpg

　　php_mysql.jpg

　　puente_mujer.jpg

　　small_clapclap.jpg

　　small_homerin2.jpg

　　small_logocoders.jpg

　　small_neuquen.jpg

　　small_php_mysql.jpg

　　small_puente_mujer.jpg

　　small_ryu.jpg

　　yo.jpg

　　user.png

この中で必要なのは、CSSファイル、JSファイル、sexyimagesフォルダです。
これ以外にMooToolsライブラリーが必要になります。
持っていない場合には、Google の AJAX Libraries API を使いましょう。

準備

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

Sexy Lightbox 2.1 の設置

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

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

ダウンロードしてきた sexy-lightbox-2.1.zip には、SexyLightbox の実行ファイル sexylightbox.v2.1.mootools.js, sexylightbox.v2.1.mootools.min.js の２つが入っていますが、どっちを使ってもかまいません。 min が付いているファイルは、圧縮した JavaScript ファイルです。
上記のコードを HTML の <head>内に貼り付けてください。
sexylightbox.v2.1.mootools.js, sexylightbox.css のパスは自分の環境に合わせて変更してください。
その次に、JavaScript を書き込みます。

<script type="text/javascript">
window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox();
});
</script>

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

SexyLightbox の使い方

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

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

Image

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 のカスタマイズ

SexyLightbox = new SexyLightBox();

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

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

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

SexyLightbox = new SexyLightBox({color:'white'});

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

「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 を呼び出すことはできません。

インラインフレームコンテンツ

872 blog

<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 で表示すると、ちょっとカッコイイですね。

You Tube

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

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

BACK