[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]

1件のコメント

  1. すみません、試してみたところIE6~8では動作しませんでした。
    何か分かるようであれば教えてもらえないでしょうか?

    Reply
  2. ごめんなさい。自己解決しました。
    「var imgs =」の行から「$(‘#view’).append(imgs);」の行までの間を以下のものに書き換えてIEで動作確認しました。

    var imgs = “”;
    $(‘#view’).append(imgs);
    $(‘#view-‘+i).hide();

    Reply
  3. 何度もすみません。imgs以降にHTMLタグいれてたので消えてますね。。
    var imgs = “&lt;img src='”+myhref+”‘ title='”+myalt+”‘ alt='”+myalt+”‘ class=’change’ id=’view-“+i+”‘ height='”+myheight+”‘ width='”+mywidth+”‘ style=’position:absolute; top:0; left:0;’ /&gt;”;

    Reply
  4. ご指摘ありがとうございます。
    おそらく、オブジェクトキー class がクォートで囲ってない為だと思われます。

    class: ‘change’, → ’class’ : ‘change’

    念のためすべてのキーをコメントアウトした方がいいかもしれません。(修正しました)

    Reply
  5. IE6,7,8で動くにはどうしたらいいでしょうか?今すぐ修正したいのですが、大変困っています。何卒よろしくお願いいたします。

    Reply
  6. sasakimiwa さん>
    IEで動きませんか?だとしたら多分CSSの問題だと思うのでCSSを見直してみてください。

    Reply

Leave a Comment.