sileya-ai
/
vr-shopxo-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品详情相册小图片增加轮播优化

feat/task1-c-wallet
gongfuxiang 2022-05-08 10:48:40 +08:00
parent e95979fefe
commit ec2c0f774d
3 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/index/view/default/goods/index.html
View File

@ -72,24 +72,22 @@
<!-- pc放大镜 / 左侧 -->
<div class="clearfix-left" id="clearcontent">
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<div class="tb-booth tb-pic">
{{if !empty($goods['photo'][0])}}
<img src="{{$goods['photo'][0]['images']}}" alt="{{$goods.title}}" rel="{{$goods['photo'][0]['images']}}" class="jqzoom" />
{{/if}}
</div>
<ul class="tb-thumb" id="thumblist">
{{if !empty($goods.photo)}}
{{foreach $goods.photo as $photo_key=>$photo}}
<li class="{{if $photo_key eq 0}}tb-selected{{else /}} tb-pic{{/if}}">
<div class="tb-pic tb-s40">
<a href="javascript:;">
<img src="{{$photo.images}}" mid="{{$photo.images}}" big="{{$photo.images}}" class="tb-s40" />
</a>
</div>
</li>
{{/foreach}}
{{/if}}
</ul>
<div class="am-slider am-slider-default am-slider-carousel am-margin-0 tb-thumb" data-am-flexslider="{itemWidth: 60, itemMargin: 5, slideshow: false, controlNav: false}">
<ul class="am-slides" id="thumblist">
{{if !empty($goods.photo)}}
{{foreach $goods.photo as $photo_key=>$photo}}
<li class="{{if $photo_key eq 0}}tb-selected{{else /}} tb-pic{{/if}}">
<img src="{{$photo.images}}" mid="{{$photo.images}}" big="{{$photo.images}}" class="tb-pic-min" />
</li>
{{/foreach}}
{{/if}}
</ul>
</div>
<!-- 视频 -->
{{if !empty($goods.video)}}

17
public/static/index/default/css/goods.css
View File

@ -459,22 +459,13 @@ flex: 1 1 0%;line-height: 16px;cursor: pointer;}
@media only screen and (min-width:1025px) {
/*放大镜*/
/* box */
.box { position: relative; border: 1px solid #eee; }
.tb-pic a { display:table-cell; text-align:center; vertical-align:middle; }
.tb-pic a img {vertical-align:middle; }
.tb-pic a {*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb { padding: 5px; overflow: hidden; background: #f9f9f9; }
.tb-thumb li {background:none repeat scroll 0 0 transparent; float:left; margin:0 6px 0 0; overflow:hidden; padding:1px; }
.tb-s310 a { *font-size:271px;}
.tb-s40 a { *font-size:35px;}
.tb-s40{ height:60px; width:60px; }
.tb-booth { border-bottom:1px solid #f5f5f5; position:relative; z-index:1;overflow: hidden; height: 358px; }
.tb-booth img { max-width: 100%;height: 100%; margin: 0 auto; display: block; }
.tb-thumb .tb-selected { background:none repeat scroll 0 0 #C30008; height:62px;}
.tb-thumb .tb-selected div { background-color:#FFFFFF; border:medium none; }
.tb-thumb li div { border:1px solid #eee; overflow: hidden;}
.tb-thumb { padding: 5px; overflow: hidden; background: #f9f9f9; height: 70px; -webkit-box-shadow: none;box-shadow: none;}
.tb-thumb ul.am-slides li { padding:1px; border: 1px solid #eee; height:60px; width:60px !important;cursor: pointer; }
.tb-thumb ul.am-slides li img {height: 56px; width: 56px !important;}
.tb-thumb ul.am-slides .tb-selected { border: 1px solid #C30008;}
div.zoomDiv { z-index:999; position:absolute; top:0px; left:0px; width:400px; height:400px; background:#ffffff; border:1px solid #CCCCCC; display:none; text-align:center; overflow:hidden; }
div.zoomDiv img { min-width: 1000px; display: block; }
div.zoomMask { position:absolute; background:url(../images/goods-mask.png)repeat scroll 0 0 rgba(33, 150, 243, 0.3); cursor:move; z-index:1; }

7
public/static/index/default/js/goods.js
View File

@ -562,10 +562,11 @@ $(function() {
$('.jqzoom').imagezoom({
yzoom: 398
});
$('#thumblist li a').on('mouseover', function() {
$('#thumblist li img').on('mouseover', function() {
$(this).parents('li').addClass('tb-selected').siblings().removeClass('tb-selected');
$('.jqzoom').attr('src', $(this).find('img').attr('mid'));
$('.jqzoom').attr('rel', $(this).find('img').attr('big'));
var img = $(this).attr('mid');
$('.jqzoom').attr('src', img);
$('.jqzoom').attr('rel', img);
});
// 规格选择显示事件