- 2008-08-20 (水) 18:46
- Custom
ColorMeShop!Proの商品詳細ページの拡大画像表示について。
この記事はサムネイルにマウスオーバーしたら画像を切り替える方法を使用したメモです。
前にLightboxを使う方法を書いてますがどちらにするかはお好みで。
元エントリーのスクリプトを若干変えただけですが、XHMTL・CSS・Javascriptをまとめて貼っておきます
画像サイズとかは適当に変更すること。
NoImageのURLはアップロード先のURLにしてください。
HTML:
-
<div id="photo">
-
<p id="mainimg">
-
<{if $product.img_url != ""}><img src="<{$product.img_url}>" alt="Main Image" id="myImg" />
-
<{else}>
-
<img src="noimg_m.jpg" width="520" height="392" alt="No Image" /><{/if}></p>
-
<!-- 商品サブ画像 -->
-
<{if $product.ot1_url != ""}>
-
<ul id="thumb"><{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>" width="170" /></li><{/if}>
-
<{/if}>
-
<{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>" width="170" /></li>
-
<{/if}></ul>
-
<{/if}>
-
</div>
clearFixの代わりにclear:bothしたエレメント入れてもいいです。
CSS:
-
div#photo {}
-
p#mainimg {
-
float:left;
-
width:520px;
-
padding-right:10px;
-
margin:0;
-
}
-
div#photo ul#thumb {
-
list-style:none;
-
margin:0 0 0 530px;
-
}
-
div#photo ul#thumb li {
-
margin-bottom:3px;
-
}
-
div#photo ul#thumb li img {
-
cursor:pointer;
-
}
-
div#photo:after {
-
content:".";
-
height:0px;
-
clear:both;
-
display: block;
-
visibility:hidden;
-
}
-
div#photo { zoom:100%; }
サムネイル＝拡大画像なんで置換なし。
smartyタグでデフォルトの画像URLをNoImage画像と分岐させてます。
#itemnameは商品タイトル。サムネイル４枚にしても良い。
JavaScript:
-
<script type="text/javascript">
-
//<![CDATA[
-
-
window.onload =function(){
-
var myImg = document.getElementById("thumb").getElementsByTagName("img");
-
var defsrc = "<{if $product.img_url != ""}><{$product.img_url}><{else}>noimg_m.jpg<{/if}>";
-
var newimg = new Array();
-
for (var i = 0; i <myImg.length; i++) {
-
newimg[i] = new Image();
-
newimg[i].src = myImg[i].src;
-
myImg[i].onmouseover =function() {
-
var href = this.src;
-
document.getElementById('myImg').src=href;
-
}
-
}
-
document.getElementById("itemname").onmouseover =function() {
-
document.getElementById('myImg').src=defsrc
-
}
-
}
-
-
//]]>
-
</script>
javsacriptは上級者モードでHTML内に貼ること。
window.onloadがダブる場合はまとめないとエラーになります
関連記事
- Newer: ZeroMail ver0.5
- Older: [jQuery]hrefのURLがフルパスの時だけ別窓を開く
