コンテンツをポップアップするLightboxタイプのスクリプトなのですが、画像も動画もウェブサイトもログインフォームもなんでもかんでもポップアップするうえに、グループナンバーを割り振ることによってそれぞれをグループ化することが可能。
jQueryとMooToolsの両Ajaxライブラリに対応していますので、他のJavaScriptとの相性に合わせて選ぶこともできます。
画像をポップアップ
動画をポップアップ
インラインフレームでウェブサイトをポップアップ
ダウンロード
主にjQuery版についての説明となりますが、MooTools版も実装方法も同様です。
リンク先のDownloadで「sexy-lightbox-2.2.zip」をクリック。
ダウンロード後、解凍。jQuery版とmootools版が同梱されていますので、どちらを使用するか決めたら使用する方のフォルダを「sexy-lightbox」とリネームしてください。
Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、先程リネームしたsexy-lightboxフォルダに入れてください。
MooToolsの場合も同様です。
MooToolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。
必ずやっておくこと
最大のポイントです。sexylightbox.v2.2.jquery.jsの29行目（MooTools版は23行目）に記述されている「imagesdir : ‘sexyimages‘,」の青字部分をフルパスに書き直すこと。
パーツ画像の在処を示すプロパティなので’http://アップロードしたURL/sexyimages‘とURLを追加記入しておかないと背景画像が正しく表示されません。
ちなみに、sexylightbox.v2.2.jquery.jsの27行目（MooTools版は21行目）の’black‘を’white‘に書き換えると背景パーツが「白」になります。お好みに応じて変更してください。
実装手順
サーバーにsexy-lightboxフォルダをアップロード。
<head>～</head>の間に以下を記述。
jQuery使用時
<link rel="stylesheet" href="http://サイトURL/sexy-lightbox/sexylightbox.css" type="text/css" /> <script type="text/javascript" src="http://サイトURL/sexy-lightbox/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://サイトURL/sexy-lightbox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://サイトURL/sexy-lightbox/sexylightbox.v2.2.jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ SexyLightbox.initialize(); }); </script>
MooTools使用時
<link rel="stylesheet" href="http://サイトURL/sexy-lightbox/sexylightbox.css" type="text/css" /> <script type="text/javascript" src="http://サイトURL/sexy-lightbox/mootools-1.2.3-core-nc.js"></script> <script type="text/javascript" src="http://サイトURL/sexy-lightbox/sexylightbox.v2.2.mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ SexyLightbox = new SexyLightBox(); }); </script>
使い方
基本的には、リンクに「rel=”sexylightbox”」と付け加えるだけ。
グループ分け（関連づけ）する場合は「rel=”sexylightbox[グループナンバー]“」とすると、同じナンバーのコンテンツを巡回できるようになります。
「title=”タイトル”」を加えると、タイトルを表示することもできます。
<a href="コンテンツURL" rel="sexylightbox[グループナンバー]" title="タイトル">リンク</a>
動画を表示する（inline）
動画をポップアップさせる場合、ページに貼り付けた動画を非表示にしておいてからSexy Lightboxで表示させることになります。
<div id="video" style="display:none;"></div>の中に動画を貼り付けすると非表示になります。id名は適当に付けてOKですが、リンクを設定する際は同じid名にする必要があります。
サイズの指定も忘れずに。
<div id="video" style="display:none;"> <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/bNF_P281Uu4&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bNF_P281Uu4&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object> </div> <a href="#TB_inline?height=385&width=480&background=#000&inlineId=video" rel="sexylightbox" title="タイトル">リンク</a>
ウェブサイトをインラインフレームで表示する（iframe）
サイトURLと表示サイズを指定して以下のように記述します。
<a href="http://www.google.co.jp/?TB_iframe=true&height=500&width=900" rel="sexylightbox" title="Google" >Google</a>
以上です。
それでは、がんばってください。
via（Dream CSS）
コメントはまだありません
コメントは管理者の承認後に表示されます