Lightbox2にトライ
Java Scriptのライブラリ、Lightbox2（Lokesh Dhakar氏作）に挑戦です。
http://www.lokeshdhakar.com/projects/lightbox2/にアクセスして、Light Boxライブラリをダウンロードします。見習が使わせてもらったのは、LightboxV2.05です。
ZIP形式で圧縮されているので、解凍します。
解凍するとLightbox2.05というフォルダができるので、中のフォルダやファイルをディレクトリ構造をいじらずにそのまま、コピーして使います。必要なフォルダは「css」「images」「js」です。Dream Weaverで「サイトの管理」を利用してサイトをコントロールしているなら、サイトの定義をしてあるフォルダの中にコピーして、Dream Weaverの「更新」(F5)を押せばOKです。
Lightboxライブラリと見た目を整えるCSSを読み込むための記述をヘッダー内にします。JSライブラリの読み込み順序は、以下の順序で変更は不可です。
(X)HTMLのヘッダーの記述
<meta http-equiv="Content-Script-Type" content="text/script" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />BODY内に記載する、表示する画像の記述
<div id="wrap">
<dl><dt><a href="lightimgs/img01.jpg" rel="lightbox" title="<a href="http://pc.beginners-luck.net/" target="_blank">Photo1</a>">
<img src="lightimgs/img01.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
<dl><dt><a href="lightimgs/img02.jpg" rel="lightbox"title="photo2"><img src="lightimgs/img02.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
<dl><dt><a href="lightimgs/img03.jpg" rel="lightbox" title="photo3"><img src="lightimgs/img03.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
<dl><dt><a href="lightimgs/img04.jpg" rel="lightbox" title="photo4"><img src="lightimgs/img04.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
</div>Lightboxで表示したい画像を<a href>で書きます。rel="lightbox"と書くことでLightboxで表現する対象となります。 title="photo1"を書くことで、Lightboxで表示されたときのキャプションとなります。また、キャプション自体にリンク設定をしたい場合は、Photo1のように、文字参照を使って記述すればOKです。(ex title="<a href="http://pc.beginners-luck.net/" target="_blank">Photo1</a>")
ここでは、リンクするサムネイル画像は、Lightboxで使用する写真をそのままHTML的にWidthとHeightを使って縮小させていますが、別に同じファイルを使う必要はないです。きっちり縮小した画像を作成し、img01_s.jpgのようなファイル名を付けて、そちらの別ファイルを使ってもOKです。っていうか、そっちのほうがいいような…。
できました、うひほ。
でも、ひとつひとつ写真を見たら、閉じて次を見るっていうのは、ちょっとまどろっこしい？っていう場合は、グループ化という方法を使います。
(X)HTMLのヘッダーの記述
<meta http-equiv="Content-Script-Type" content="text/script" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />ヘッダー内の記述は上とまったく同じ。違うのは、BODY内の画像に書き込む、relの記述のところ。
BODY内に記載する、表示する画像の記述
<div id="wrap">
<dl><dt><a href="lightimgs/img01.jpg" rel="lightbox[land1]" title="photo1"><img src="lightimgs/img01.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
<dl><dt><a href="lightimgs/img02.jpg" rel="lightbox[land1]" title="photo2"><img src="lightimgs/img02.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
<dl><dt><a href="lightimgs/img03.jpg" rel="lightbox[land1]" title="photo3"><img src="lightimgs/img03.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
<dl><dt><a href="lightimgs/img04.jpg" rel="lightbox[land1]" title="photo4"><img src="lightimgs/img04.jpg" width="40" height="30" alt="" /></a></dt>
<dd>クリックで拡大</dd></dl>
</div>rel="lightbox[land1]というところです。[land1]という記述が付加されてます。このカッコ内に、グループ化する画像すべてに共通する名前をつけてやるだけです。別にlandでなくても、photoでも、なんでも任意でOKです。これでグループ化されます。どれかの写真をクリックすると、nextやprevボタンが出現して、それをクリックすると、進んだり戻ったりできます。
うひょうひょと喜ぶ、見習です。でけた。
2012年1月6日1:03 AM| カテゴリー： HTMLとCSSのコード,Java ScriptとJ Query,見習い奮闘記| コメント (0)
森歩き日記
自称パソプロ化計画
