<?xml version="1.0"?>
<labeltemplate>
   <label>
    <![CDATA[
	       <style type="text/css">

/* 这是下方的鼠标指针的移动镜头平方米。 */
.cloud-zoom-lens {border: 1px solid #888;margin:-4px;background-color:#fff;cursor:move;}
/* 这是标题文本 */
.cloud-zoom-title {background-color:#000;color:#fff;padding:3px;width:100%;text-align:center;font-weight:bold;font-size:12px;top:0px;}
/* 这是缩放窗口。 */
.cloud-zoom-big {border:1px solid #ccc;overflow:hidden;}
/* 这是加载消息。 */
.cloud-zoom-loading {color:white;background:#222;padding:3px;border:1px solid #000;}

</style>
	<script src="{$GetInstallDir}Shop/js/cloud-zoom.1.0.2.min.js"></script>
	<div class="zoom-section">    	  
		<div class="zoom-small-image">
			<a href='{$DefaultBigPic}'  class = 'cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4"><img src="{$DefaultSmallPic}" alt='' width="{$BigWidth}" height="{$BigHeight}" title="{KS:Field:Title}" /></a></div>
		<div class="zoom-desc">
			
			<div style="margin-bottom:8px;margin-top:0px;text-align:center;">
			<a href="javascript:;" onClick="window.open('{$GetSiteUrl}shop/ShowPic/?id={KS:Current:ItemID}&u='+jQuery('#zoom1').attr('href'))"><img src="{$GetSiteUrl}sysimg/look.gif" align="absmiddle" title="点击看大图"></a>
			
			
			<iframe name="hidfavorite" src="about:blank" width="0" height="0" style="display:none;width:0px;height:0px"></iframe>

			<label class="checkcomparefalse"><a target="hidfavorite" href="{$GetSiteUrl}user/favorite.aspx?modelid={KS:Current:ModelID}&id={KS:Current:ItemID}">加入收藏</a></label>
			
			</div>

			<DIV id="spec-n5">
			  <DIV class="control" id="spec-left"><IMG src="{$GetInstallDir}Shop/images/left.gif"> </DIV>
				<DIV id="spec-list">
					<UL class="list-h">
					  {$GroupImgList}
					 </UL>
				 </DIV>        
			  <DIV class="control" id="spec-right"><IMG src="{$GetInstallDir}Shop/images/right.gif"> </DIV>
			</DIV>
			
			
		</div>
	</div>
	
	
	<style>
.list-h li {
	float: left;
}
#spec-n5 {
	width: {$BigWidth}px; height: 62px; overflow: hidden; padding-top: 6px;
}
#spec-left {
	 width: 18px; height: 56px; margin-top: 1px; float: left; cursor: pointer;
}
#spec-right {
	width: 18px; height: 56px; margin-top: 1px; float: left; cursor: pointer;
}

#spec-list ul li {
	width: 62px; padding-right: 5px; float: left; display: inline;cursor:pointer;
}
#spec-list ul li img {
	padding: 2px; border: 1px solid rgb(204, 204, 204); border-image: none; width: 57px; height: 54px;
}
#spec-list {
	margin-right: 6px; position: relative;overflow: hidden; margin-left: 5px; float: left; display: inline;
}

	</style>
	
	
	
	<SCRIPT type="text/javascript">
    $(function () {
        $("#spec-list").width({$BigWidth}-50).jdMarquee({
            deriction: "left",
            width: {$BigWidth},
            height: 62,
            step: 2,
            speed: 4,
            delay: 10,
            control: true,
            _front: "#spec-right",
            _back: "#spec-left"
        });
        $("#spec-list img").bind("click", function () {
		    $("#spec-list img").css({
			  "border": "1px solid #ccc",
                "padding": "2px"
			});
            $(this).css({
                "border": "2px solid #ff6600",
                "padding": "1px"
            });
        });
		

    })
	
	
$(document).ready(function(){
 $("#spec-list img").eq(0).css({
			 "border": "2px solid #ff6600",
             "padding": "1px"
	});
 });

	
</SCRIPT>
	<script src="{$GetInstallDir}Shop/js/lib.js"></script>
	<!--zoom-section end-->

	]]>
   </label>
</labeltemplate>