lightbox2.0を作ってみた。
今回は、prototype.jsを使用したlightboxを作ってみました。
色々なライブラリでも、lightboxの発展系が登場していますし、前回作ったmootoolsを使用したslimboxもその中の一つです。
こんなやつです。
実際には、
のreleaseの部分で使用されていたりします。
では、どうぞ！
* 準備 *
こちらのlightbox2.0の作者であるLokesh Dhakar氏のサイトから、"lightbox2.03.3.zip"のファイルをダウンロードします。
この中に、全て揃っていますので、これで準備は終了です。
* lightbox2.0の設置 *
ファイルの構成は、
index.html
css
- lightbox.css
js
- effects.js
- lightbox.js
- prototype.js
- scriptaculous.js
img
- blank.gif
- close.gif
- closelabel.gif
- image-1.jpg
- loading.gif
- next.gif
- prev.gif
- prevlabel.gif
- thumb-1.jpg
となっています。
次に、<head>～</head>タグ内に次のソースを記述します。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css">
最後に、<body>タグ内に次のソースを記述します。
<div>
<a href="images/image-1.jpg" rel="lightbox" title="image01">image01を表示</a>
</div>
これで完成です。また以下のサンプルのように、
サムネイルをクリックするようにしたい場合は、
<div>
<a href="images/image-1.jpg" rel="lightbox" title="image01">
<img src="images/thumb-1.jpg" width="100" height="40" alt="image01"></a>
</div>
と記述すれば大丈夫です。
また、以下のサンプルのように、
何枚かの写真をグループかして、"next"や"preview"を押して、スライドさせることも可能です。
その場合は、まず必要な写真とそのサムネイル(この場合は、三種類ずつ)をimgフォルダに格納した後、<body>タグ内に、
<div>
<a href="images/image-1.jpg" rel="lightbox[a]" title="image01">
<img src="images/thumb-1.jpg" width="100" height="40" alt="image01">
</a>
</div>
<div>
<a href="images/image-2.jpg" rel="lightbox[a]" title="image03">
<img src="images/thumb-2.jpg" width="100" height="40" alt="image03">
</a>
</div>
<div>
<a href="images/image-3.jpg" rel="lightbox[a]" title="image03">
<img src="images/thumb-3.jpg" width="100" height="40" alt="image03">
</a>
</div>
と記述します。rel="lightbox[a]"と指定されているのがグループ名で、この部分が同じ名前のものを、スライドして見られるようになります。
ですので、lightboxサンプル03の場合全部写真は同じですが、上の3つはrel="lightbox[a]"と指定してあり、下の3つはrel="lightbox[b]"と指定しています。
* 参考サイト *
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)