Lightboxを使い画像を拡大表示する。

Lightboxは、画像をクリックすると拡大画像を表示するJavaScriptライブラリーです。

サンプル

設置は簡単。JavaScriptの知識さえほとんど必要ないです。

まずLightbox JS V2.0よりLightbox JS V2.0をダウンロードします。
ページの真ん中あたりにあるDownload:Lightbox JS V2.0をクリックしてダウンロードしてください。

ダウンロードしたファイルは解凍後サーバにアップしてください。

次はLightBoxを設置するページのhead要素内に、次のコードを記述します。

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

サムネイルに、次のコードを記述します。

<a href="拡大後の写真のurl" rel="lightbox"><img src="サムネイルのurl" /></a>

これでサムネイルがクリックされた場合に拡大画像が表示されるようになります。

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
AjaxやJavaScriptのライブラリー
javascriptで文字にドロップシャドウをつける方法
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ

スポンサードリンク

«WEBサイトがCMを超える日 | メイン | height100%のボックスを作成する。»