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%のボックスを作成する。»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1406
トラックバック内容
» Movable Type 4.12対応のプラグイン情報 from heeha.ws::blog
エントリーの関連付けを行うプラグイン 関連記事をエントリーに表示するプラグイン:Movable Type(MT)の無料テンプレート Movable ...
コメント

,builder抜けてますようぅ。

投稿者:Lonely-comet | 2010年10月20日 03:26
コメントを投稿