Lightbox

1.サーバへ設置

Lihtbox2からzipファイルをダンロードし解凍する。解凍したファイルをWEBにアップロードする。
 

2.使い方

(1)スクリプト
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

(2)スタイルシート

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

(3)リンク

画像へのリンク(aタグ)で、rel="lightbox" を追加する。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

複数表示するときは同じグループ名を、lightbox[グループ名] という形で書く。
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

3.サンプル

   Share
Simpleviewer HOME

×