JavaScriptを使って画像の切り替え&LightBox使用

ネタ元:JavaScriptを使ってクリック時に画像を入れ替える その3

自分の先輩でもあるチバのブログのチバコウタロウさんがクリック時に画像を入れ替えるいろんな方法を書いてくれていたので、それを生かしつつ拡大画像をクリックしたらLightBoxで表示するようにしてみました。

…ここからが続き

画像の切り替え&LightBox使用の解説

今回のデモページではサイト全体を上下中央にすると併用した感じで作ってみました。

画像のギャラリー系サイトや、アパレル関係のサイトなんかには凄く使えそうな感じだと思いますので、是非参考にして下さい。

demo page

head内のXHMTLソース

<link rel="stylesheet" href="css/lightbox.css" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/photo.js"></script>
<script type="text/javascript">
$(function() {
	$('#imgMain a').lightBox();
});
</script>

※LightBoxをJQueryで動かす為の記述です。詳しくはLightBoxのJQuery版 jQuery lightBox pluginをご覧下さい。

body内のXHMTLソース

<p id="imgMain"><a href="image/photo/01.jpg"><img src="image/photo/01.jpg" alt="" id="target" width="600" /></a></p>
<ul id="gallery">
<li><a href="image/photo/01.jpg"><img src="image/photo/01.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/02.jpg"><img src="image/photo/02.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/03.jpg"><img src="image/photo/03.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/04.jpg"><img src="image/photo/04.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/05.jpg"><img src="image/photo/05.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/06.jpg"><img src="image/photo/06.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/07.jpg"><img src="image/photo/07.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/08.jpg"><img src="image/photo/08.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/09.jpg"><img src="image/photo/09.jpg" alt="" width="150" /></a></li>
<li><a href="image/photo/10.jpg"><img src="image/photo/10.jpg" alt="" width="150" /></a></li>
</ul>

photo.js内のソース

$(document).ready( function() {
	$("#gallery a img")
	.fadeTo(1,1)
    .hover( 
        function(){
            $(this).fadeTo(200, 0.5);
        },
        function(){
            $(this).fadeTo(500, 1);
        }
    )
	.click( function() {
        var changeSrc = this.src;
        $("#target").fadeOut(
            "slow",
            function() {
                $(this).attr("src", changeSrc);
				$("#imgMain a").attr("href", changeSrc);
                $(this).fadeIn();
            }
        );
        return false;
    });
});

詳しい解説はチバのブログでされていますので、そちらをご覧下さい。

自分で追加した点は

$("#imgMain a").attr("href", changeSrc);

ここの部分のみです。(ホバーの感じなど少しいじった点はあります。)

demo page

Comments

aki

aki

このサンプルですと、lightBoxに画面が切りかわった時に
prevやnextのボタンやキャプションの表示がありませんが、
このパターンでの上記の表示はどのようにしたらよろしいでしょうか?

2010年03月17日 15:22

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article