[jQuery]サムネイルクリックで画像変更（+effect）

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

HTML

<div id="change_image">
	 <div id="view">
	 <p id="myImg"><img src="01.jpg" alt="Sample Image" width="320" height="400"/></p>
	 </div>
	<ul id="thumbs">
		<li><img src="01_thumb.jpg" alt="Sample Image01" width="80" height="100" /></li>
		<li><img src="02_thumb.jpg" alt="Sample Image02" width="100" height="80" /></li>
		<li><img src="03_thumb.jpg" alt="Sample Image03" width="80" height="100" /></li>
		<li><img src="04_thumb.jpg" alt="Sample Image04" width="100" height="80" /></li>
	</ul>
  </div>
</div>

やってることはmootoolsの方とほぼ同じ。
サムネイルサイズに縮小倍率かけて拡大画像のサイズを設定してるので、比率違うのが混じるとサイズがおかしくなります。

javascript

 $(document).ready(function (){
									 
	if($('#change_image')){
		
		var mag = 4; //imgsize magnification
		var regrep = "_thumb"; // 	Replace name of thumbnail images
		
		$('ul#thumbs img').each(function(i){
			var myhref = $(this).attr('src').replace(regrep,"");
			var myalt = $(this).attr('alt');
			var myheight = $(this).height()*mag;
			var mywidth = $(this).width()*mag;
			var imgs = $("<img></img>").attr({ 
				  'src': myhref,
				  'title': myalt,
				  'class': 'change',
				  'alt': myalt,
				  'id': 'view-'+i,
				 'height':myheight,
				  'width':mywidth
			});
			imgs.css({
				position:'absolute',
				top:'0',
				left:'0'
			});
			imgs.hide();
			$('#view').append(imgs);
			$(this).click(function(){
				$('#view').css({
					'width': mywidth,
					'height': myheight
				});
				$('#view img').hide();
				$('#view-'+i).fadeIn();
			});
		});
	}
});

ダウンロード»[download#30#nohits]