2009/07/01 lightboxによる画像拡大表示
[フリーソフト] ブログ村キーワード
[年賀状] ブログ村キーワード
lightbox2.04ダウンロード先
lightbox2.04を使ったページ
年賀状一覧ページ
今回は拡大表示をしてから次の画像に移動できるようにしています
設定内容
ダウンロードしてきたlightbox2.04を解凍して
JSフォルダーとCSSフォルダーを表示したいページのフォルダーに置きます
<head>～</head>
の中に以下を追加します
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects">
</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/builder.js"></script>
<script type="text/javascript" src="js/scriptaculous.js">
</script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
画像の設定は
設定1
<a href="jpeg_big/c003.jpg" rel="lightbox" title="カラー
003"><img src="jpeg_small/c003.jpg" alt="年賀状デザイン2010" /></a>
設定2
<a href="jpeg_big/c003.jpg" rel="lightbox[年賀状]"
title="カラー003">
<img src="jpeg_small/c003.jpg" alt="年賀状デザイン2010" /></a>
設定1、2共通説明
rel=”lightbox”をつける事によって拡大表示してくれます
設定1、2の違い
lightbox[年賀状]にすることによって『年賀状』というグループにできます
グループにすると拡大表示した時に画像にマウスを持って行くと
『NEXT(次に)』と『PREV(戻る)』が表示されそれぞれの画像に移動する
ことが出来ます
今回はすべての画像を『年賀状』のグループにしました
備考
title=”カラー003はつけてもつけなくてもいいですが
つけた方がいいと思います