Sexy Lightbox 2.1 設定方法
- Sexy Lightbox 2 とは?
- DOWNLOAD
- Sexy Lightbox 2.1 の設置
- SexyLightbox の使い方
- Sexy Lightbox のカスタマイズ
- 画像以外のもの
- Sexy Lightbox 2.2設置方法
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 の2つが入っていますが、どっちを使ってもかまいません。 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>
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 を呼び出すことはできません。
インラインフレームコンテンツ
<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" > youtube </a>
you tube のリンクは you tube にリンクしているわけではなく、コードを貼った HTML を表示しているだけです。