<!--{assign var="menu_id" value="gallery"}-->
<!--{include file="<!--{$oetplpath}-->block_header.tpl"}-->
<style type="text/css">body{background:#000;}</style>

<div class="oe_ntop" style="background:#000;">
  <i class="iconfont" onclick="goBack();">&#xe616;</i>
  <p>美图欣赏</p>
</div>


<!--{assign var="mygallery" value=vo_list("mod={photo} where={v.galleryid='<!--{$gallery.galleryid}-->'}")}-->
<div class="oe_preview_title">
  <span>左右滑动预览照片</span>
  <i id="orderi">1</i>/<!--{count($mygallery)}-->
  <div class="clear"></div>
</div>
<div style="margin:0 auto;" id="preview_box">
  <div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper">
	  <!--{foreach $mygallery as $volist}-->
      <div class="swiper-slide"><img src="<!--{$volist.drawimg}-->"></div>
	  <!--{/foreach}-->
    </div>
  </div>
</div>
<script type="text/javascript">
$(window).on("resize", function() {
	fixPagesHeight();
});
$(function(){
	$("#preview_box").css("max-width", WIN_WIDTH);
	fixPagesHeight();
});
function fixPagesHeight() {
	$('.swiper-slide,.swiper-container').css({
		height: (WIN_HEIGHT-100)
	});
}
//实例化Swiper
var mySwiper = new Swiper('.swiper-container', {
	direction: 'horizontal',
	mousewheelControl: true,
	watchSlidesProgress: true,
	onInit: function(swiper) {
		swiper.myactive = 0;
	},
	
	onProgress: function(swiper) {
		for (var i = 0; i < swiper.slides.length; i++) {
			var slide = swiper.slides[i];
			var progress = slide.progress;
			var translate, boxShadow;
			translate = 0;
			scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
			boxShadowOpacity = 0;
			slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')';
			if (i == swiper.myactive) {
				es = slide.style;
				es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
				es.zIndex=0;
			}else{
				es = slide.style;
				es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform ='';
				es.zIndex=1;
			}
		}
	},

	onTransitionEnd: function(swiper, speed) {
		for (var i = 0; i < swiper.slides.length; i++) {
		//	es = swiper.slides[i].style;

		//	es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = '';
		//	swiper.slides[i].style.zIndex = Math.abs(swiper.slides[i].progress);
		}

		swiper.myactive = swiper.activeIndex;
		$("#orderi").html(swiper.activeIndex+1);
		//alert(swiper.activeIndex);
	},

	onSetTransition: function(swiper, speed) {
		for (var i = 0; i < swiper.slides.length; i++) {
			//if (i == swiper.myactive) {
				es = swiper.slides[i].style;
				es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
			//}
		}
	}

});
</script>
</body>
</html>