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

サンプルを見る

HTMLの基本構成

HTMLは、

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

で構成されています。

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

HTMLソース

<div id="EnlagePhoto">
	<p><img src="../img/img_enlarge.jpg" /></p>
	
	<div id="linkEnlarge">
		<a class="link01" href="#enlarge01">1の画像を拡大させる</a>
		<a class="link02" href="#enlarge02">2の画像を拡大させる</a>
		<a class="link03" href="#enlarge03">3の画像を拡大させる</a>
	</div>
	
	<div id="imgEnlarge">
		<div id="enlarge01" class="enlargeParent">
			<p class="img"><img src="../img/enlarge01.jpg" width="380" height="300" /></p>
			<div class="txt"><p>石垣からの侵入者を防ぐための石落としが設置されている。</p></div>
		</div>
		<div id="enlarge02" class="enlargeParent">
			<p class="img"><img src="../img/enlarge02.jpg" width="380" height="235" /></p>
			<div class="txt"><p class="txt">天守閣は五層で出来ている。<br />高さは石垣も含め約39メートル。</p></div>
		</div>
		<div id="enlarge03" class="enlargeParent">
			<p class="img"><img src="../img/enlarge03.jpg" width="380" height="300" /></p>
			<div class="txt"><p class="txt">毛利輝元は豊臣政権下の五大老の一人だったため、豊臣家の紋である「五三の桐」が瓦に取り入れられている。</p></div>
		</div>
	</div>
</div>

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

Javascriptソース

window.onloadから始めているのは、img画像のwidthとheightのサイズを取得するためです。
全ての読込が完了してから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);
		});

	});


});

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