jquery1.4で画像とリンクの切り替えを行おうとしています。
jquery1.4で画像とリンクの切り替えを行おうとしています。
ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で
横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。
対処法があれば教えていただけますでしょうか？
【javascript】
$(document).ready( function() {
$(".thumbnail p").click( function() {
var changeSrc = this.src;
var changeHref = this.href;
$("#target img").fadeOut("fast",
function() {
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
$("#target a").attr("href", changeHref);
});
$(".thumbnail2 img").click( function() {
var changeSrc = this.src;
$("#target2").fadeOut(
"slow",
function() {
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
});
$(".thumbnail3 img").click( function() {
var changeSrc = this.src;
$("#target3").slideUp(
"slow",
function() {
$(this).attr("src", changeSrc);
$(this).slideDown();
}
);
});
});
</script>
【HTML】
<div>
<p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p>
</div>
<div class="thumbnail">
<p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item">
<img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" />
<br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p>
<p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item">
<img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" />
<br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p>
</div>
【css】
.thumbnail {
height:200px;
text-align:center;
}
.item {
float:left;
padding-left:10px;
margin-left:10px;
}
補足
回答ありがとうございます。 いえ、ソースから問題の商品画像を開いて、ダイアログのタイトルを 見ると、480×720pxと記述されているのです。 拡大しても、ローカルでテストしているサイズと違っていることを確認しています。 これがメインの写真を拡大表示する写真に影響が出ていて、 拡大比率が下がってしまっています。 ちなみにこの現象はWebkitでは発生しておらず、Trident(IE)、Geckoで発生しております。 ローカルでテストしていたときは問題なく表示していたので 原因がわかりません。もしお分かりになるようでしたら教えてください。