上一篇 实现了视频上传,接下来实现商品视频保存数据库,添加一个字段就可以,这里就不多说了,重点说一下商品详情页视频显示。
本来以为视频显示很简单,结果差点被搞死,研究了一天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
});
});
搞定!