画像を拡大表示するLightbox2

Check このエントリーをはてなブックマークに追加

配布元：Lightbox2
ライセンス：CC Attribution 2.5 Generic

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

設置方法

ダウロードしたjavascriptファイルやCSSファイルを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>

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

サンプル

スポンサードリンク

コメント

カテゴリー：prototype.js script.aculo.us ライブラリ 拡大 画像