[js]ColorMeShop!Pro商品詳細用　ロールオーバースクリプト

16年前

ColorMeShop!Proの商品詳細ページの拡大画像表示について。
この記事はサムネイルにマウスオーバーしたら画像を切り替える方法を使用したメモです。
前にLightboxを使う方法を書いてますがどちらにするかはお好みで。
元エントリーのスクリプトを若干変えただけですが、XHMTL・CSS・Javascriptをまとめて貼っておきます

画像サイズとかは適当に変更すること。
NoImageのURLはアップロード先のURLにしてください。

<h1 id="itemname"><{$product_name}></h1>
<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 $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>" width="170" /></li>
	<{/if}>
	<{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>" width="170" /></li>
	<{/if}></ul>
	<{/if}>
</div>

clearFixの代わりにclear:bothしたエレメント入れてもいいです。

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は商品タイトル。サムネイル４枚にしても良い。

<script type="text/javascript">
//<!&#91;CDATA&#91;

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&#91;i&#93; = new Image();
		newimg&#91;i&#93;.src = myImg&#91;i&#93;.src;
		myImg&#91;i&#93;.onmouseover =function() {
			var href = this.src;
			document.getElementById('myImg').src=href;
		}
	}
	 document.getElementById("itemname").onmouseover =function() {
		document.getElementById('myImg').src=defsrc
	}
}

//&#93;&#93;>
</script>

javsacriptは上級者モードでHTML内に貼ること。
window.onloadがダブる場合はまとめないとエラーになります

シェア