…ここからが続き

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

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

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

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);

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