カラーミーショップをカスタマイズすると、JSが外部から呼び出せないジレンマに陥ることがありますよね。
(新しく追加されたFTPオプションなるものを使えば、外部JSを呼び出せるようになるのかな？わかんないけど)

でも、最近ECサイトで良く見かける、
詳細画面でトップ画像以外のサムネイルにマウスオーバーすると、トップ画像の場所にサムネイルのでかい画像に差し変わる。という効果を入れてみたくないですか？
新規ページで画像だけが開くのも昔チックだし・・・

で、HTML内に埋め込める短いJSソースで、カラーミーの独自タグを生かした方法を見つけました。

入れ込むJavascript

<script type='text/javascript'>
<!--
function largeImg(sImg)
{
document.images['imgBox'].src=sImg;
}
-->
</script>

HTML側のソース

<!-- 商品画像 -->
<{if $product.img_url != ""}>
    <div class="img"><img src="<{$product.img_url}>" class="large" width="400" name="imgBox" /></div>
<{else}>
    <div class="img"><img src="http://img.shop-pro.jp/tmpl_img/21/now200.gif" class="large" /></div>
<{/if}>
<!--// 商品画像 -->

<!-- 商品画像その他 -->
<table cellspacing="0" cellpadding="0">
<tr>
<td><{if $product.ot1_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot1_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot1_url}>" width="125" /></a><{/if}></td>
<td><{if $product.ot2_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot2_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot2_url}>" width="125" /></a><{/if}></td>
<td><{if $product.ot3_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot3_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot3_url}>" width="125" /></a><{/if}></td>
</tr>
</table>
<!--// 商品画像その他 -->

HTMLのtableタグはもちもん、自分のコードに合わせてくれていいんですけど、

onmouseover='largeImg("<{$product.ot1_url}>")'
でサムネイル用のイメージタグである
<{$product.ot1_url}>
を出して、
onmouseout='largeImg("<{$product.img_url}>")'
で一番目の商品画像である
<{$product.img_url}>
タグに戻すって訳ですね。

上に書いたJSはその入れ替わる場所を指定する方法なんだそうです。

タグ:, , , ,