『Lightbox JS v2.0』の導入例

配布元

• Lightbox JS v2.0

参照記事

• Lightbox JS v2.0 公開(PamGau)

ディレクトリ構造

• public_html
  • lightbox2
    • css
      • lightbox.css
    • js
      • lightbox.js
      • prototype.js
      • scriptaculous.js
      • effects.js
    • images
      • close.gif
      • loading.gif
      • その他関係画像一切
  • media
    • Sample
      • lightbox2.html(このファイル)

headのmeta/linkタグ

<script type="text/javascript" src="../../lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="../../lightbox2/js/scriptaculous.js"></script>
<script type="text/javascript" src="../../lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="../../lightbox2/css/lightbox.css" />

lightbox.jsの画像パス

var fileLoadingImage = "../../lightbox2/images/loading.gif";
var fileBottomNavCloseImage = "../../lightbox2/images/close.gif";
var borderSize = 10;

単一の画像

HTML

<p>
<a href="../../lightbox2/images/00.jpg" rel="lightbox" title="げっ歯類">
<img src="../../lightbox2/images/thum00.jpg" width="120" height="90"
 alt="げっ歯類" title="げっ歯類" style="border:none;" />
</a>
</p>

複数の画像

HTML

<p>
<a href="../../lightbox2/images/01.jpg" rel="lightbox[bokutitsu]"
 title="すましヌコ">
<img src="../../lightbox2/images/thum01.jpg" width="120" height="90"
 alt="すましヌコ" title="すましヌコ" style="border:none;" />
</a>
<a href="../../lightbox2/images/02.jpg" rel="lightbox[bokutitsu]"
 title="すまし蝶">
<img src="../../lightbox2/images/thum02.jpg" width="120" height="90"
 alt="すまし蝶" title="すまし蝶" style="border:none;" />
</a>
<a href="../../lightbox2/images/03.jpg" rel="lightbox[bokutitsu]"
 title="あまがえる">
<img src="../../lightbox2/images/thum03.jpg" width="120" height="90"
 alt="あまがえる" title="あまがえる" style="border:none;"/>
</a>
<a href="../../lightbox2/images/04.jpg" rel="lightbox[bokutitsu]"
 title="道端のヌコ">
<img src="../../lightbox2/images/thum04.jpg" width="120" height="90"
 alt="道端のヌコ" title="道端のヌコ" style="border:none;"/>
</a>
</p>

画像提供

写真素材サイト

僕の見た秩序

This File