Lightboxは写真などを同じウィンドウでポップアウトウィンドウで表示させるJSコード。Lightbox2.0は表示効果がもっと華麗になったほか、写真をグループ化もできます、簡単に前後で写真閲覧できます。
効果はしたの写真をクリックしてみてください。
単一の写真：
写真のグループ化：
設定方法も簡単です。
まず、このファイルをダウンロードしてください。
ダウンロードした書庫ファイルにはCSS、JS、IMAGE三つのディレクトリがあります、それぞれLightboxに使うスタイルファイル、JavaScriptファイルと画像ファイルが含んでます。
１、IMAGEにあるblank.gif,loading.gif, closelabel.gif, nextlabel.gif, prevlabel.gifをあなたのページスペースにアップロードする。
２、JS/lightbox.jsファイルを開く、loading.gifとcloselabel.gifを先ほどアップロードしたファイルのアドレスで書き換える。
var fileLoadingImage = "../images/loading.gif";
var fileBottomNavCloseImage = "../images/closelabel.gif";
３、CSS/lightbox.cssを開く、ファイルにあるblank.gif,nextlabel.gif, prevlabel.gifのアドレスを修正する。
４、以上修正終わったら、CSS/lightbox.css, JS/prototype.js, JS/lightbox.js, JS/scriptaculous.js,JS/effects.js五つのファイルをページスペースへアップロードする。
５、テンプレートファイルの<head>セクションに以下のコードを追加する。yourhostの部分をそれぞれ書き換えてください。
<script type="text/javascript" src="yourhost/prototype.js" />
<script type="text/javascript" src="yourhost/scriptaculous.js?load=effects" />
<script type="text/javascript" src="yourhost/lightbox.js" />
<link rel="stylesheet" href="yourhost/lightbox.css" type="text/css"
media="screen" />
６、以上設定は完了です。使い方は記事で写真ファイルのリンクコード<a href="...">に rel="lightbox" title="your titel"を追加すれば完了です。
<a href="image.jpg" rel="lightbox" title="my caption">image file</a>
写真をグループ化するには、一組の写真ファイルのrelをグループ名で記述すればいいです。
<a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
0 コメント:
コメントを投稿