ウェブページで画像表示をする際に簡単にリッチな表現にできるJSライブラリ。もうウェブページ作成時には定番となってきましたね。
■インストール方法
【STEP1】
ライブラリをダウンロードします。
【STEP2】
lightboxを設置したいHTMLのヘッダー部分に下記のコードを記載します。
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
*パスは、CSSとJSの設置先に合わせて変更してください。
【STEP3】
HTMLの<body>内に例えば下記のように記載し、lightboxを設置します。
<a href="sample.jpg" rel="lightbox">画像</a>
*画像というテキストを押下すると、sample.jpgがlightbox効果を付与された状態で表示されます。
■ダウンロード