Ecstore/BBC 视频上传（二）

上一篇 实现了视频上传，接下来实现商品视频保存数据库，添加一个字段就可以，这里就不多说了，重点说一下商品详情页视频显示。
本来以为视频显示很简单，结果差点被搞死，研究了一天js。。。?

一、WAP端显示：
1、/data/www/product/app/topc/controller/item.php：
添加框内代码：

2、修改 /data/www/product/app/topwap/view/item/detail/pic.html:

class="shopex-slider-group shopex-slider-loop"的div html内容改为以下代码

<div class="shopex-slider-group shopex-slider-loop">
	<!-- 第一张 -->
	<{if !$item.list_image}>
		<div class="shopex-slider-item">
			<a href="#"> <img src="<{$image_default_id.L.default_image|storager}>">
			</a>
		</div>
	<{else}>
		<div class="shopex-slider-item shopex-slider-item-duplicate">
			<a href="#"> <img src="<{$item.list_image_last|storager:'l'}>">
			</a>
		</div>
		<{foreach from=$item.list_image item=image_id}>
		<div class="shopex-slider-item">
			<a href="#">
				<{if $image_id==$item.video_default_id}>
				<video src="<{$item.video_default_id}>" width="375" height="375" controls="controls"><source src="<{$item.video_default_id}>" type=""></video>
				<{else}>
				<img src="<{$image_id|storager:'l'}>">
				<{/if}>
			</a>
		</div>
		<{/foreach}>
		<div class="shopex-slider-item shopex-slider-item-duplicate">
			<a href="#"> <{if $item.list_image_first==$item.video_default_id}>
				<video src="<{$item.video_default_id}>" width="375" height="375" controls="controls"><source src="<{$item.video_default_id}>" type=""></video>
				<{else}>
				<img src="<{$item.list_image_first|storager:'l'}>">
				<{/if}>
			</a>
		</div>
	<{/if}>
</div>

二、pc端视频显示：
1、/data/www/product/app/topc/controller/item.php：
添加框内代码：

2、修改 /data/www/product/app/topc/view/items/basic/pic.html：

<div class="col-lg-5 box zoom-slider">
  <div class="pic-show">
    <{if !$item.list_image}>
    <div class="show-box"><img src="<{$image_default_id.L.default_image|storager}>" /></div>
    <{else}>
    <div class="show-box">
      <{if $item.list_image.0==$item.video_default_id}>
          <video src="<{$item.video_default_id}>" width="310" height="310" controls="controls" ><source src="<{$item.video_default_id}>" type=""></video>
      <{else}>
          <img src="<{$item.list_image.0|storager:'l'}>" rel="<{$item.list_image.0|storager}>" class="jqzoom" alt="" />
      <{/if}>
    </div>
    <{/if}>
  </div>
  <div class="pic-thumb">
    <div class="next-group"><i class="icon-chevron-right"></i></div>
    <div class="pre-group"><i class="icon-chevron-left"></i></div>
    <div class="slider-thumb-wrap">
      <ul class="slider-thumb" id="thumblist">
        
        <{if !$item.list_image}>
        <li class="active"><img src="<{$image_default_id.S.default_image|storager:t}>" /></li>
        <{else}>
        <{foreach from=$item.list_image item=image_id}>
        <{if $image_id == $item.video_default_id}>
              <li class="active"><div class="thumb-item"><span class="jqzoom-video"><video preload="metadata" src="<{$item.video_default_id}>" width="60" height="60" controls="controls" mid="<{$item.video_default_id}>" big="<{$item.video_default_id}>"><source src="<{$item.video_default_id}>" type=""></video></span></div></li>
        <{elseif !$item.video_default_id && $image_id == $item.image_default_id}>
        <li class="active"><div class="thumb-item"><span class="jqzoom-image"><img src="<{$image_id|storager:t}>" mid="<{$image_id|storager:l}>" big="<{$image_id|storager}>" /></span></div></li>
        <{else}>
        <li><div class="thumb-item"><span class="jqzoom-image"><img src="<{$image_id|storager:t}>" mid="<{$image_id|storager:l}>" big="<{$image_id|storager:l}>"></span></div></li>
        <{/if}>
         
        <{/foreach}>
        <{/if}>
      </ul>
    </div>
  </div>

到这里你是不是觉得已经搞定了，no，你会发现图片的放大镜效果失效了???

3、修改 /data/www/product/public/app/topc/statics/scripts/zoom_silder.js

    $("#thumblist li span").mouseover(function(e) {

        e.preventDefault();
        $(this).parents("li").addClass("active").siblings().removeClass("active");
	   //$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
       //$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
        //视频和图片判断
        if ($(this).hasClass("jqzoom-image")) {            
            var html = ' <img src="" rel="" class="jqzoom" alt="" /></div>';
            $(".show-box").html(html);
            $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
            $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
        }else if($(this).hasClass("jqzoom-video")){
            var html = '<video src="" width="310" height="310" controls="controls" class="video-show"><source src="" type=""></video>';
            $(".show-box").html(html);

            $(".video-show").attr('src', $(this).find("video").attr("mid"));
            $(".video-show").attr('rel', $(this).find("video").attr("mid"));
            $("source").attr('src', $(this).find("video").attr("big"));
        }
        /**
         *  将原来$(".jqzoom").attr('src', $(this).find("img").attr("mid"));  
         * $(".jqzoom").attr('rel', $(this).find("img").attr("big")); 
         * 改为 
         * if ($(this).hasClass("jqzoom-image")) { ...}else if($(this).hasClass("jqzoom-video")){...}
         * 后，必须要初始化以下代码！！图片放大镜功能才会有效
         *
         **/
        $(".jqzoom").imagezoom({
            xzoom: 365,
            yzoom: 365
        });
        
    });

搞定！