<?xml version="1.0"?>
<labeltemplate>

   <label name="style0">
    <![CDATA[
	     <script type="text/javascript">
		 var imgArr='{$ImgArr}'.split('|');
		 var introArr='{$IntroArr}'.split('|');
		 var currPage=0;
		 function showImg(n){
		   if (n<0) { 
		     //KesionJS.Alert('没有上一张图片了！');return;
		   }
		   if (n>={$TotalPage}) n=0;
		   currPage=n;
		   $("#scrool_wrap").find("a").attr("class","normalthumb");
		   $("#t"+n).addClass("currthumb");
		   $("#currpa").html(n+1);
		   $("#currp").html(n+1);
		   $("#ShowLargeImg").hide().attr("src",imgArr[n]).fadeIn('slow');
		   $(".imageintro").html(introArr[n]);
		 }
		 function prev(){
		   if (currPage-1<0){
		    currPage={$TotalPage};
		   }
		  showImg(currPage-1);
		 }
		 function next(){
		 showImg(currPage+1);
		 }
function upNext(bigimg){
	var imgurl		= 1;
	var width	= bigimg.width;
	var height	= bigimg.height;
	bigimg.onmousemove=function(){
		if(event.offsetX<width/2){
			bigimg.style.cursor	= 'url({$GetSiteUrl}sysimg/default/arr_left.cur),auto';
			imgurl				= currPage-1;
		}else{
			bigimg.style.cursor	= 'url({$GetSiteUrl}sysimg/default/arr_right.cur),auto';
			imgurl				= currPage+1;
		}
	}
	bigimg.onmouseup=function(){
		showImg(imgurl);
	}
}



var interval = 5000;
var timerId = -1;
var derId = -1;
var replay = false;
var num = 0;
function $$(o){
return document.getElementById(o);
}
function derivativeNum() {
num++;
$$('displayNum').innerHTML = '[' + (interval/1000 - num) + ']';
if (num>=interval/1000) num=-1;
}
function playNextPic(stat) {
if(stat || replay) {
derId = window.setInterval('derivativeNum();', 1000);
$$('displayNum').innerHTML = '[' + (interval/1000 - num) + ']';
$$('playid').onclick = function (){replay = false;playNextPic(false);};
$$('playid').innerHTML = '停止播放';
timerId = window.setInterval('next();', interval);
} else {
replay = true;
num = 0;
$$('playid').innerHTML = '幻灯播放';
$$('playid').onclick = function (){playNextPic(true);};
$$('displayNum').innerHTML = '';
window.clearInterval(timerId);
window.clearInterval(derId);
}
}

var initnum=4;//每次显示张数,根据页面滚动宽度可适当调整
var scrollWrapW=130;//每次滚动距离
var iss=1;//当前张数

var l;
$(document).ready(function () {
	l=$('#scrool_wrap li').length;
	iss=iss-1;
	
	jQuery("#scrollleft").bind("click",ole);
	jQuery("#scrollright").bind("click",ori);
	var total = $('#scrool_wrap li').length;
	$("#zys").html(total); 
     
	
	$('#scrool_wrap li').eq(iss).find('img').eq(0).addClass('curimg');
	
	if(iss>0&&iss<initnum){
		var tiss=iss;
		var temscr=-scrollWrapW*(tiss);
		$("#scrool_wrap").animate({left:temscr},1000);
	}else{
		if(iss<=l-initnum){
			var tiss=iss;
			var temscr=-scrollWrapW*(tiss);
			$("#scrool_wrap").animate({left:temscr},1000);
		}else{
			var tiss=l-initnum;
			var temscr=-scrollWrapW*(tiss);
			$("#scrool_wrap").animate({left:temscr},1000);
			iss=tiss;
		}
	}
	
});

function ole(){
	next();
	if(iss==-1){
		iss=0;
	}else if(iss==(l-initnum)){
		olend();
	}else if(iss<(l-initnum)){
		var temscr=-scrollWrapW*(iss+1);
		$("#scrool_wrap").animate({left:temscr},1000);
		iss++;
	}
	
}
 function ori(){
	prev();
 	if(iss>0){
		var temscr=-scrollWrapW*(iss-1);
		$("#scrool_wrap").animate({left:temscr},1000);
		iss--;
	}else {
		olend();
	}
 }

function  olend(){
	//到底后的跳方法
	//KesionJS.Alert("您已浏览完全部缩略图!");
}
function  orend(){
	//到底后的跳方法
	//KesionJS.Alert("您已浏览完全部缩略图!");
}


</script>
<div class="imagelist">
 <div class="imagetop">共 <span style="color:red">{$TotalPage}</span> 张,当前第 <span style="color:#ff6600" id="currpa">1</span> 张 <a href="javascript:prev()">上一张</a> | <a href="javascript:next()">下一张</a> <a href="javascript:;" id="playid" class="osld" onclick="playNextPic(true);">幻灯播放</a>
<span id="displayNum"></span></div>
 <div class="defaultimagesrc"><Img onload="javascript:resizepic(this)" id="ShowLargeImg" onmouseover="upNext(this)" src="{$DefaultImageSrc}" border="0"></div>
 <div class="imageintro">{$DefaultImageIntro}</div>

  <div class="thumb">
    <div class="thumb_1"><span class="font-28" id="currp">1</span> / <span id="zys">{$TotalPage}</span></div>
      
    <div class="thumb_2">
      <div class="thumb_2_1" id="scrollright"></div>
         <div class="thumb_2_2" id="scrollleft"></div>
    	  <!--缩略图开始-->
      <div id="scrool_div">
		  <ul id="scrool_wrap">
			{$ShowThumbList}
		  </ul>
		</div>
      <!--缩略图结束-->
      </div>
  </div>
</div>
	]]>
   </label>
   <label name="style1">
    <![CDATA[
	     <script type="text/javascript">
function upNext(bigimg){
	var lefturl		= '{$PrevUrl}';
	var righturl	= '{$NextUrl}';
	var imgurl		= righturl;
	var width	= bigimg.width;
	var height	= bigimg.height;
	bigimg.onmousemove=function(){
		if(event.offsetX<width/2){
			bigimg.style.cursor	= 'url({$GetSiteUrl}sysimg/default/arr_left.cur),auto';
			imgurl				= lefturl;
		}else{
			bigimg.style.cursor	= 'url({$GetSiteUrl}sysimg/default/arr_right.cur),auto';
			imgurl				= righturl;
		}
	}
	bigimg.onmouseup=function(){
		top.location=imgurl;
	}
}

function addCookie(objName,objValue,objHours){//添加cookie
   var str = objName + "=" + escape(objValue);
   if(objHours > 0){//为0时不设定过期时间，浏览器关闭时cookie自动消失
    var date = new Date();
    var ms = objHours*3600*1000;
    date.setTime(date.getTime() + ms);
    str += "; expires=" + date.toGMTString();
   }
   document.cookie = str;
  }
  
  function getCookie(objName){//获取指定名称的cookie的值
   var arrStr = document.cookie.split("; ");
   for(var i = 0;i < arrStr.length;i ++){
    var temp = arrStr[i].split("=");
    if(temp[0] == objName) return unescape(temp[1]);
   } 
  }

var interval = 5000;
var timerId = -1;
var derId = -1;
var replay = false;
var num = 0;
function forward() {
window.location.href = '{$NextUrl}';
}
function $$(o){
return document.getElementById(o);
}
function derivativeNum() {
num++;
$$('displayNum').innerHTML = '[' + (interval/1000 - num) + ']';
}
function playNextPic(stat) {
if(stat || replay) {
derId = window.setInterval('derivativeNum();', 1000);
$$('displayNum').innerHTML = '[' + (interval/1000 - num) + ']';
$$('playid').onclick = function (){replay = false;playNextPic(false);};
$$('playid').innerHTML = '停止播放';
timerId = window.setInterval('forward();', interval);
addCookie("photoautoplayer", true,0);
} else {
addCookie("photoautoplayer", false,0);
replay = true;
num = 0;
$$('playid').innerHTML = '幻灯播放';
$$('playid').onclick = function (){playNextPic(true);};
$$('displayNum').innerHTML = '';
window.clearInterval(timerId);
window.clearInterval(derId);
}
}
window.onload=function(){
 if (getCookie("photoautoplayer")=='true') playNextPic(true);
}

var initnum=4;//每次显示张数,根据页面滚动宽度可适当调整
var scrollWrapW=130;//每次滚动距离
var iss={$CurrPage};//当前张数

var l;
$(document).ready(function () {
	l=$('#scrool_wrap li').length;
	iss=iss-1;
	
	$("#left").bind("click",ole);
	$("#right").bind("click",ori);
	var total = $('#scrool_wrap li').length;
	$("#zys").html(total); 
     
	
	$('#scrool_wrap li').eq(iss).find('img').eq(0).addClass('curimg');
	
	if(iss>0&&iss<initnum){
		var tiss=iss;
		var temscr=-scrollWrapW*(tiss);
		$("#scrool_wrap").animate({left:temscr},1000);
	}else{
		if(iss<=l-initnum){
			var tiss=iss;
			var temscr=-scrollWrapW*(tiss);
			$("#scrool_wrap").animate({left:temscr},1000);
		}else{
			var tiss=l-initnum;
			var temscr=-scrollWrapW*(tiss);
			$("#scrool_wrap").animate({left:temscr},1000);
			iss=tiss;
		}
	}
	
});

function ole(){
	if(iss==-1){
		iss=0;
	}else if(iss==(l-initnum)){
		olend();
	}else if(iss<(l-initnum)){
		var temscr=-scrollWrapW*(iss+1);
		$("#scrool_wrap").animate({left:temscr},1000);
		iss++;
	}
	
}
 function ori(){
 	if(iss>0){
		var temscr=-scrollWrapW*(iss-1);
		$("#scrool_wrap").animate({left:temscr},1000);
		iss--;
	}else {
		olend();
	}
 }

function  olend(){
	//到底后的跳方法
	KesionJS.Alert("您已浏览完全部缩略图!");
}
function  orend(){
	//到底后的跳方法
	KesionJS.Alert("您已浏览完全部缩略图!");
}


</script>
<div class="imagelist">
 <div class="imagetop">共 <span style="color:red">{$TotalPage}</span> 张,当前第 <span style="color:#ff6600">{$CurrPage}</span> 张 <a href="{$PrevUrl}" target="_self">上一张</a> | <a href="{$NextUrl}" target="_self">下一张</a> <a href="javascript:;" id="playid" class="osld" onclick="playNextPic(true);">幻灯播放</a>
<span id="displayNum"></span></div>
 <div class="defaultimagesrc"><Img onload="javascript:resizepic(this)" onmouseover="upNext(this)" src="{$DefaultImageSrc}" border="0"></div>
 <div class="imageintro">{$DefaultImageIntro}</div>

  <div class="thumb">
    <div class="thumb_1"><span class="font-28">{$CurrPage}</span> / <span id="zys">{$TotalPage}</span></div>
      
    <div class="thumb_2">
      <div class="thumb_2_1" id="right"></div>
         <div class="thumb_2_2" id="left"></div>
    	  <!--缩略图开始-->
      <div id="scrool_div">
		  <ul id="scrool_wrap">
			{$ShowThumbList}
		  </ul>
		</div>
      <!--缩略图结束-->
      </div>
  </div>
</div>
	]]>
   </label>
   
   <label name="style2">
    <![CDATA[
		<div class="imggrouplist">
		 <ul>
		  {$ShowGroupList}
		 </ul>
		</div>
		{$ShowPage}
		<link rel="stylesheet" href="{$GetSiteUrl}ks_inc/Swipebox/swipebox.css">
		<script src="{$GetSiteUrl}ks_inc/Swipebox/jquery.swipebox.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				$(".swipebox").swipebox();
			});
		</script>
		
	]]>
   </label>
      <label name="style3">
    <![CDATA[
	    <div class="imglist">
	    {$ShowImgList}
	    </div>
		<link rel="stylesheet" href="{$GetSiteUrl}ks_inc/Swipebox/swipebox.css">
		<script src="{$GetSiteUrl}ks_inc/Swipebox/jquery.swipebox.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				$(".swipebox").swipebox();
			});
		</script>
	    {$ShowPage}
	]]>
   </label>
</labeltemplate>