今回は撮った写真にワンポイントアクセントをつける、拡大画像ギャラリーの紹介です。
先日、広島城を撮影したので、城を紹介するのに便利だと思い作成しました。
もちろんjQueryを使用しています。

サンプルを見る

HTMLの基本構成

HTMLは、

• クリックされる写真画像
• 拡大させる箇所のアンカーリンク
• 拡大後の画像

で構成されています。

クリックした際に拡大させる画像は、Javascriptで制御をします。

HTMLソース

[sourcecode language=’html’]

[/sourcecode]

CSSソース

[sourcecode language=’css’]
#EnlagePhoto {
position: relative;
}

#linkEnlarge {
}

#linkEnlarge a {
position: absolute;
display: block;
text-indent: -9999px;
overflow: hidden;
}

#linkEnlarge a.link01 {
top: 206px;
left: 186px;
width: 60px;
height: 30px;
}
#linkEnlarge a.link02 {
top: 45px;
left: 211px;
width: 83px;
height: 51px;
}
#linkEnlarge a.link03 {
top: 118px;
left: 240px;
width: 72px;
height: 46px;
}

#imgEnlarge {
}

#imgEnlarge div.enlargeParent {
position: absolute;
}

#imgEnlarge div div.txt {
background: #000;
border: solid #000 1px;
color: #fff;
font-size: 80%;
}

#imgEnlarge div div.txt p {
padding: .5em;
}
[/sourcecode]

Javascriptソース

window.onloadから始めているのは、img画像のwidthとheightのサイズを取得するためです。
全ての読込が完了してからJavascriptが実行されるので、要素の属性を取りこぼしなく読み込めます。

[sourcecode language=’javascript’]
window.onload = $(function(){
var linkEnlarge = “#linkEnlarge”
var imgEnlarge = “#imgEnlarge”
var enlargeParent = “.enlargeParent”
var Img = “p.img”
var Txt = “div.txt”

$(enlargeParent , imgEnlarge).hide();
$(Txt).hide();

$(“a” , linkEnlarge).each(function(){
$(“a” , linkEnlarge).css({background:”#fff” , border:”solid #000 1px” , zIndex:”10″ , cursor:”pointer” , opacity:”0.3″});
var ID = $(this).attr(“href”);
var idTop = $(this).css(“top”);
var idLeft = $(this).css(“left”);
$(“img” , Img).css({width:”0″ , height:”0″});
$(ID).css({top:idTop , left:idLeft});

$(this).click(function(){
$(“a” , linkEnlarge).hide();
var ImgH = $(Img + ” img” , ID).attr(“height”);
var ImgW = $(Img + ” img” , ID).attr(“width”);
$(ID).show();
$(Txt , ID).css({width:ImgW + “px”});
$(Txt , ID).css({marginLeft: “-” + ImgW / 2 + “px”});
$(Img + ” img” , ID).animate({
marginTop: “-” + ImgH / 2 + “px”,
marginLeft: “-” + ImgW / 2 + “px”,
width: ImgW + “px”,
height: ImgH + “px”
}, 500, function(){
$(Txt , ID).fadeIn(500);
});
return false;
});

$(ID).click(function(){
$(“img” , Img).css({margin:”0″ , width:”0″ , height:”0″});
$(Txt).hide()
$(this).hide();
$(“a” , linkEnlarge).fadeIn(200);
});

});

});
[/sourcecode]

1. Web-Parkのホーム > 
2. Javascript > 
3. 写真の見せ方にワンポイントアクセント！拡大画像ギャラリー