江湖家居装修效果图内容页显示图片超过原始尺寸的问题

江湖家居V6.0至尊版装修效果图栏目中的图片集浏览页，底部带有缩略图的图片翻页效果，是通过 jQuery图片组展示插件----Galleria 来实现的，该组件放在 /static/script/galleria 文件夹下，通过 \themes\default\case\detail.html 模板调用 /static/script/galleria 文件夹内相关js和css文件。
调用Galleria 组件可以图片集中显示的大图自适应父级div容器的尺寸，但是该组件显示的大图并不完美，就是当图片原始尺寸比父级div容器小，会自动把图片放大显示，不能显示图片原始尺寸，造成放大显示的图片看起来粗糙，不美观。

有同样问题的装修网站：
土拨鼠装修网：http://www.tobosu.com/pic/tc/83872.html
信用家：http://www.xyj321.com/xiaoguotu/15.html

展示效果较好的装修网：
土巴兔（js控制，兼容IE）：http://xiaoguotu.to8to.com/c10038346.html
一起装修网（js控制，兼容IE）：http://www.17house.com/xiaoguotu/3717201.html
爱福窝（js控制，兼容IE）：http://meitu.fuwo.com/c1697273.html
齐装网（js控制，不兼容IE）：http://meitu.qizuang.com/p45964.html

通过对比研究以上相关装修网站，在实现带有缩略图的图片翻页方案中，其中“一起装修网”中调用的js代码比较简洁而且兼容IE浏览器，于是借鉴“一起装修网”的js和css代码，实现带有缩略图的图片翻页效果完美显示，实现方法如下：

一、修改 \themes\default\case\detail.html 模板文件，修改后代码如下：

<{include file="block/small-header.html"}>
<style type="text/css">
html{overflow-y: hidden;height: 100%;}
</style>
<link rel="stylesheet" href="%THEME%/static/script/customcrollbar/jquery.mCustomScrollbar.min.css" type="text/css" />
<script type="text/javascript" src="%THEME%/static/js/xgt-xiangqing.js"></script>
<script src="%THEME%/static/js/plug-in.js" type="text/javascript" charset="utf-8"></script>
<div class="content colorbg">
<div class="case_crumbs">
<ul class="lt">
<li><span class="ico_list breadna"></span>您的位置：<a href="index"><{$CONFIG.site.title}></a> ><a href="<{link ctl='case:items'}>">装修案例</a> ><a href="<{link ctl='case:detail' arg0=$detail.case_id}>"><{$detail.title}></a> </li>
</ul>
<ul class="wechatapp rt">
<li class="fenxiang"> <i class="fenxiang-bj"></i> <a href="javascript:;">分享</a> </li>
<li class="weixin"> <i class="weixin-bj"></i> <a href="javascript:;">收藏到微信</a> </li>
<li class="big_img"> <i class="big_img-bj"></i> <a target="_blank" href="http://static-xiaoguotu.17house.com/web/xiaoguotu/201703/03/201703031513343842.jpg">查看原图</a> </li>
<div class="coDe">
<div class="pic">[ 手机扫码 ]<img src="%THEME%/static/images/codeico.jpg" /></div>
<div class="show" id="QRimg" style="padding:5px;background-color:#fff;width:96px;height:80px;" val="<{$mobile_url}>"></div>
</div>
<label><a like="<{$detail.case_id}>"><font class="index_ico like_ico"></font><{$detail.likes}>人喜欢</a></label>
<label><font class="index_ico person_ico"></font><{$detail.views}>人浏览</label>
</li>
</ul>
</div>
<div class="imgbox">
<div class="imgbox-left lt">
<div class="imgbox-left-box">
<div class="img-sc"><i></i>收藏</div>
<div class="img-sch"><i></i>已收藏</div>
</div>
<div class="imgbox-left-prev btn"></div>
<div class="imgbox-left-next btn_next btn"></div>
<div class="img-from cl">
<p class="img-from-price "><{$detail.title}></p>
<p class="img-from-biao bigPic_sheji"><a href="/price/">装修成这样要花多少钱</a></p>
<p class="img-from-biao bigPic_baojia"><a href="/tenders/">免费户型设计</a></p>
</div>
<div class="imgList">
<div class="imgList-left btn"></div>
<div class="imgList-right btn_next btn"></div>
<div class="imgList-box">
<ul class="imgList-ul cl">
<{foreach $photos as $item}>
<li class="imgList-li" last="/case/detail-<{$detail.case_id}>.html"> <a href="javascript:;"> <img class="lazy" src="<{$pager.img}>/<{$item.photo}>_small.jpg" data-src="<{$pager.img}>/<{$item.photo}>" alt="<{$detail.title}>" data-title="<{$detail.title}>" data-gid="<{$detail.case_id}>" data-src="<{$pager.img}>/<{$item.photo}>_small.jpg"/> </a> </li>
<{/foreach}>
</ul>
</div>
</ul>
</div>
<div class="cl"></div>
</div>
<div class="imgbox-right lt" id="case_right_content"> <{widget id="tenders/fast" title="免费装修设计" from="TSJ"}>
<div class="mb10 area">
<div class="pding">
<div class="sub_case_yuyue"> <{if $company}> <a href="<{$company.company_url}>" class="lt"><img src="<{$pager.img}>/<{$company.thumb}>" /></a>
<div class="lt">
<p><a href="<{$company.company_url}>" class="tit"><{$company.name}></a> </p>
<a href="<{link ctl='gs:yuyue' arg0=$company.company_id http='ajax'}>" mini-load="免费预约" class="btn btn_main_sm">免费预约</a> </div>
<{elseif $designer}> <a href="<{link ctl='blog' arg0=$designer.uid}>" class="lt"><img src="<{$pager.img}>/<{$designer.face_80}>" /></a>
<div class="lt">
<p><a href="<{link ctl='blog' arg0=$designer.designer_id}>" class="tit"><{$designer.name}></a> </p>
<a href="<{link ctl='designer:yuyue' arg0=$designer.uid http='ajax'}>" mini-load="免费预约" class="btn btn_main_sm">免费预约</a> </div>
<{elseif $gz}> <a href="<{link ctl='gz:detail' arg0=$gz.uid}>" class="lt"><img src="<{$pager.img}>/<{$gz.face_80}>" /></a>
<div class="lt">
<p><a href="<{link ctl='gz:detail' arg0=$gz.uid}>" class="tit"><{$gz.name}></a> </p>
<a href="<{link ctl='gz:yuyue' arg0=$gz.uid http='ajax'}>" mini-load="免费预约" class="btn btn_main_sm">免费预约</a> </div>
<{/if}>
<div class="cl"></div>
</div>
</div>
<div class="pding case_linian colorbg">
<p>设计理念:<{$detail.intro}></p>
</div>
<div class="pding"><{widget id="attr/attr" from='zx:case' value=$detail.attrvalues tpl='show.html'}></div>
</div>
<div class="mb20 pding area">
<h3>相关案例</h3>
<div class="sub_case_rtpic"> <{calldata mdl="case/case" order="views:DESC" city_id=$request.city_id limit=9}><a href="<{link ctl='case-detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.photo}>" /></a> <{/calldata}> </div>
</div>
<{if $CONFIG.comment.case_type == 'sns'}>
<{$CONFIG.comment.snscomment}>
<{elseif $CONFIG.comment.case_type == 'comment'}>
<div class="mb20 pding area">
<h3>评论(共<font class="fontcl2"><{$pager.count|default:'0'}></font>条)</h3>
<form class="pinglun" id='comment_form'>
<div>
<textarea class="text" name="content" placeholder="随便说点什么..."></textarea>
<br />
<{if $comment_yz}>
<p>验证码
<input class="text short" type="text" name="verifycode" placeholder="请输入验证码"/>
</p>
<p><img verify="#comment-verify" src="/index.php?magic-verify&_=<{$pager.dateline}>" id="comment-verify"/><a verify="#comment-verify">点击刷新验证码</a> </p>
<{/if}>
<input type="submit" mini-submit='#comment_form' action="<{link ctl='case:comment' arg0=$detail.case_id}>" name="fbpl" value="发表评论" class="text btn pinglun_btn" />
</div>
<div class="cl"></div>
</form>
<div class="new_pinglun">
<p class="tit">最新评论</p>
<ul>
<{foreach $items as $item}>
<li> <img src="<{$pager.img}>/<{$user_list[$item.uid].face_32}>" class="lt" /><{$user_list[$item.uid].uname}>
<div class="rt">
<p class="graycl"><{$item.dateline|format}></p>
<p><{if $item.audit == 0}>
<p class="tips"><span class="lock">该评论正在审核中</span></p>
<{else}><{$item.content}><{/if}>
</p>
</div>
</li>
<{/foreach}>
<{if $pager.pagebar}>
<div class="page hoverno"><{$pager.pagebar}></div>
<{/if}>
</ul>
</div>
</div>
<{/if}> </div>
</div>
<div class="cl"></div>
</div>

复制代码

灰儿 · 发表于 2017-10-8 20:06:51

二、新建 /static/js/xgt-xiangqing.js文件，代码如下：

"use strict";
$(function(){
var content_Height = $(window).height()-41;
$(".content").css({
"height":content_Height
});
var selfAdaption = function(){
/* 自适应 */
var mHeight = $(window).height()-230;
var iWidth = $(window).width()-$(".imgbox-right").width()-90;
var mg = $(window).width()*0.4;
var imgheight =parseInt($(".imgbox-left-box").find("img").attr("height"));//图片的高
var imgwidth = parseInt($(".imgbox-left-box").find("img").attr("width"));//图片的宽
var imgBL = imgwidth/imgheight;
if(iWidth<=416){
iWidth=416;
};
if(mHeight<416){
mHeight = 416+110
};
$(".imgbox-left").css({
"width":iWidth,
"height":mHeight
});
if($(window).width()<=1370){
mg=mg-200
}else{
mg = mg+100
}
if(imgheight>=mHeight-110){//图片高度大于盒子高-110 且盒子高*0.8/imgBL大于盒子高-110
if(iWidth*0.8/imgBL >= mHeight-110){
$(".imgbox-left-box").find("img").css({
"width":(mHeight-110)*imgBL,
"height":mHeight-110,
});
$(".imgbox-left-box").css({
"width":(mHeight-110)*imgBL,
"height":mHeight-110,
"top":"50%",
"left":"50%",
"margin-left":-(mHeight-110)*imgBL/2,
"margin-top":-(mHeight-110)/2-30
});
// console.log("图片高度大于盒子高-110 且盒子高*0.8/imgBL大于盒子高-110")
}else{
$(".imgbox-left-box").find("img").css({
"width":iWidth*0.8,
"height":iWidth*0.8/imgBL,
});
$(".imgbox-left-box").css({
"width":iWidth*0.8,
"height":iWidth*0.8/imgBL,
"top":"50%",
"left":"50%",
"margin-left":-iWidth*0.8/2,
"margin-top":-iWidth*0.8/imgBL/2-30
});
//console.log("图片-110")
};
}else if( iWidth*0.8/imgBL < mHeight-110 ){
$(".imgbox-left-box").find("img").css({
"width":iWidth*0.8,
"height":iWidth*0.8/imgBL,
});
$(".imgbox-left-box").css({
"width":iWidth*0.8,
"height":iWidth*0.8/imgBL,
"top":"50%",
"left":"50%",
"margin-left":-iWidth*0.8/2,
"margin-top":-iWidth*0.8/imgBL/2-30
});
//console.log("图片-220")
}else{
$(".imgbox-left-box").find("img").css({
"width":imgwidth,
"height":imgheight,
});
$(".imgbox-left-box").css({
"width":imgwidth,
"height":imgheight,
"top":"50%",
"left":"50%",
"margin-left":-imgwidth/2,
"margin-top":-imgheight/2-30
});
//console.log("图片-330")
};
$(".imgbox-right").height(mHeight+109);
if($(window).width()<=1200){ //悬浮表单按钮
$(".img-from").addClass("img-fromSM");
$(".img-from").find(".img-from-price").css({
"margin-left":25
});
$(".img-from").find(".img-from-biao").css({
"margin-top":10
});
}else{
$(".img-from").removeClass("img-fromSM");
$(".img-from").find(".img-from-biao").css({
"margin-top":0
});
$(".img-from").find(".img-from-price").css({
"margin-left":0
});
};
$(window).resize(function(){
//盒子自适应
var mLeft = $(window).width()-$(".imgbox-right").width()-90;//图片盒子的宽
var mHeight = $(window).height()-230; //图片盒子的高
var mg = $(window).width()*0.4; //分享微信放大图片的定位
var ml = 0;
if(mLeft<=416){
mLeft = 416;
ml = 0;
}else{
ml = 30;
}
if(mHeight<=416){
mHeight = 416;
};
$(".imgbox-left").css({
"width":mLeft,
"height":mHeight,
"margin-left":ml
});
if($(window).width()<=1370){
mg=mg-200
}else{
mg = mg+100
}
//分享微信查看原图
if($(window).width()<=980){
$(".path").css({
"height":"auto"
});
}else{
$(".path").css({
"height":"40px"
});
};
$(".imgbox-right").height(mHeight+109);
if($(window).width()<=1200){
$(".img-from").addClass("img-fromSM");
$(".img-from").find("p").css({
"margin-top":10
});
}else{
$(".img-from").removeClass("img-fromSM");
$(".img-from").find("p").css({
"margin-top":0
});
};
var bww = $(".imgbox-left").width()+ml+34+258;
$("#ascrail2000").css({
"left":bww
});
});
};
//selfAdaption()//初始化
var displayImg = {
init:function(){
this.$parents = $('.imgbox'); //幻灯片外层容器
this.$imgBox = $(".imgbox-left-box");//容器盒子
this.$bigImg = $(".img-big");//大图
this.$imgSc = $(".img-sc");//收藏
this.$bigPrevBtn = $('.imgbox-left-prev'); //大图向左按钮
this.$bigNextBtn = $('.imgbox-left-next'); //大图向右按钮
this.$smallImgBox = $('.imgList'); //所有小图容器，包含左右按钮
this.$scrollSmallBox = $('.imgList-box ul'); //小图滚动容器
this.$smallPrevBtn = $('.imgList-left'); //小图向左按钮
this.$smallNextBtn = $('.imgList-right'); //小图向右按钮
this.$smallImgLi = $('.imgList-box li'); //小图列表li
this.$smallImg = $('.imgList-li img'); //所有小图
this.listWidth = 90*this.$smallImgLi.length; //滚动容器宽度
this.smallImgIndex = 0; //默认展示第一张小图
this.$scrollSmallBox.width(this.listWidth).css({'margin-left':0});
this.$smallImgLight = this.$smallImgLi.eq(this.smallImgIndex).addClass('active');
this.createBigImg(this.smallImgIndex); //显示大图
this.imgClick();
this.btnDisplay();
this.tabLabel(this,0);
},
/**
* 鼠标移入显示分类，鼠标移出隐藏分类
*/
displayClassify : function(){
var timer = null,
$classify_icon = $('.path .classify_icon'),
$classify = $('.path .classify');
$('.path .classify_icon,.path .classify').hover(function(){
clearTimeout(timer);
$classify_icon.addClass('active');
$classify.show();
},function(){
$classify_icon.removeClass('active');
timer = setTimeout(function(){
$classify.hide();
},100)
});
},
BigImgUrl : function(index){ //获取小图data-src里的链接
return this.$smallImgLi.eq(index).find(".lazy").attr("data-src");
},
/**
* 计算大图的大小显示
*/
bigImgSize: function (imgW, imgH, divW, divH) {
var scale = imgW / imgH,
scale2 = divW / divH,
w,
h;
scale > scale2 ? ( w = divW, h = divW / scale ) : ( w = scale * divH, h = divH );
return {
w: w > imgW ? imgW : w,
h: h > imgH ? imgH : h
}
},
/**
* 创建大图
* @param index 创建大图需要的索引
*/
createBigImg:function(index){
var _this = this, //保存this
$smallImg = this.$smallImg.eq(index),
imgSrc = $smallImg.attr('data-src'),
bigImgAlt = $smallImg.attr('data-title'),
bigImgGid = $smallImg.attr('data-gid'),
imgHtml = '<img data-gid="'+bigImgGid+'" title="'+bigImgAlt+'" src="'+imgSrc+'" id="bigImg" alt="'+bigImgAlt+'">',
weixinQrSrc = 'http://weixin.17house.com/index.php?g=Home&m=Api&a=creatQr&restype=img&content=恭喜您收藏了'+bigImgAlt+'，%3Ca+href%3D%27http%3A%2F%2Fm.17house.com%2Fxiaoguotu%2F'+bigImgGid+'.html%27%3E点击查看%3C%2Fa%3E';
// 微信二维码加载
$('.weixin-img').attr('src', weixinQrSrc);
// 大图加载完获取实际宽高
var newImg = new Image();
newImg.setAttribute("id","bigImg");
newImg.onload = function(){
var imgWidth = this.width, //图片实际宽度
imgHeight = this.height; //图片实际高度
var bigImgSize = _this.bigImgSize(imgWidth, imgHeight, 825, 510); //计算大图比例
_this.$bigImg.remove();
_this.$imgBox.prepend(imgHtml);
_this.$bigImg = $('#bigImg');
//设置大图宽高
_this.$bigImg.css({
"width": bigImgSize.w,
"height":bigImgSize.h,
"opacity":1
}).attr({
'src' : imgSrc,
'title' : bigImgAlt,
'data-gid' : bigImgGid,
"height":imgHeight,
"width":imgWidth
});
//判断次图片是否收藏
if($(".siteNavBgRS").css("display")=="block"){
var uid = CommonCookie.getCookie("user");
var imgid = bigImgGid;
var urlP = "http://www.17house.com/xiaoguotu/iscollect/"+uid+"/"+imgid+"/";
$.getJSON(urlP, function(data) {
if(data.status == 1){
$(".img-sc").hide();
$(".img-sch").show();
}else{
$(".img-sc").show();
$(".img-sch").hide();
}
});
}else{
$(".img-sc").show();
$(".img-sch").hide();
};
//设置大图容器宽高
_this.$imgBox.css({
"width": bigImgSize.w,
"height":bigImgSize.h
});
selfAdaption() //大图替换后格式化
//查看大图
$('.big_img a').attr({'href':imgSrc});
}
newImg.src = imgSrc;
// 页面title添加
if( bigImgAlt ) {
document.title = bigImgAlt+'-一起装修网装修效果图';
}
// 改变页面url
var thisurl = "http://"+window.location.host+"/case/detail-" + bigImgGid + ".html";
if (window.history.pushState) {
window.history.pushState({ pageIndex: 1 }, bigImgAlt);//, thisurl
return true;
}
},
imgClick : function(){
var _this = this;
//点击图片切换
this.$smallImg.each(function(index,ele){
var $target = $(ele);
$target.bind('click',function(){
_this.$smallImgLi.removeClass('active').eq(index).addClass('active');
_this.createBigImg(index);
_this.smallImgIndex = index;
_this.tabLabel(_this,_this.smallImgIndex);
});
});
//点击左右按钮切换
this.$parents.delegate('.btn','click',function(ev){
var $target = $(this),
marginLeft = parseInt(_this.$scrollSmallBox.css('margin-left'));
if($target.hasClass('btn_next')){//向右
_this.smallImgIndex++;
if(_this.smallImgIndex == _this.$smallImgLi.length){
var urlA = _this.$scrollSmallBox.find("li.imgList-li:last").attr("last");
window.location.href=urlA;
};
if(_this.smallImgIndex > 3){
marginLeft = (_this.smallImgIndex - 3) * 90;
if(!_this.$scrollSmallBox.is(':animated')){
_this.$scrollSmallBox.stop(false,true).animate({'marginLeft' : -marginLeft});
};
};
}else{//向左
_this.smallImgIndex--;
if(_this.smallImgIndex < 0){
_this.smallImgIndex = 0;
}
if(_this.smallImgIndex >= 3){
marginLeft += 90;
if(!_this.$scrollSmallBox.is(':animated')){
if(parseInt(_this.$scrollSmallBox.css("margin-left"))>=0){
marginLeft=0
}
_this.$scrollSmallBox.stop(false,true).animate({'marginLeft' : marginLeft});
}
};
if(_this.smallImgIndex < 3 && parseInt(_this.$scrollSmallBox.css("margin-left"))<0){
marginLeft = 0;
if(!_this.$scrollSmallBox.is(':animated')){
_this.$scrollSmallBox.stop(false,true).animate({'marginLeft' : marginLeft});
}
};
}
_this.$smallImgLi.removeClass('active').eq(_this.smallImgIndex).addClass('active');
_this.createBigImg(_this.smallImgIndex);
_this.tabLabel(_this,_this.smallImgIndex);
ev.stopPropagation();
});
},
btnDisplay : function(){
var _this = this;
this.$parents.hover(function(){
_this.$bigPrevBtn.show();
_this.$bigNextBtn.show();
$('.tp_design,.tp_collect').show();
},function(){
_this.$bigPrevBtn.hide();
_this.$bigNextBtn.hide();
$('.tp_design,.tp_collect').hide();
})
},
//切换图片标签价格跟着变
}
displayImg.init()//初始化
displayImg.displayClassify();
tuPopTk.sheji();//设计报名
})

复制代码

灰儿 · 发表于 2017-10-13 21:47:24

三、在 /themes/default/static/css/append.css 样式表文件中，添加如下代码：

/*装修案例样式修改 2015-03-30*/
.content{
width: 100%;
}
.case_crumbs{
padding:6px 30px;
border-bottom:1px solid #ddd;
position: relative;
height: 40px;
min-width: 700px;
background: #fff;
}
.case_crumbs ul {
padding-left: 10px;
}
.case_crumbs li {
display: inline-block;
line-height: 40px;
position: relative;
padding: 0 20px;
}
.case_crumbs .wechatapp {
width: 600px;
margin-right: 300px;
position: relative;
}
.imgbox{ width: 100%; min-width: 700px;position: relative; z-index: 1; margin-top: 30px;}
.imgbox-left{width: 70%; height:700px; background: #fff; border: 1px solid #f0f0f0;margin-left: 30px;position: relative;}
.imgbox-left .imgbox-left-box{position: absolute; width: 70%;height:600px; max-width: 80%; margin-left: -40%;}
.imgbox-left-box .img-sc,.imgbox-left-box .img-sch{ cursor: pointer;position: absolute;height: 40px; padding-left: 35px; padding-right: 10px; line-height: 40px; background: url(../images/yinxiang-chun.png) repeat; right: 20px; top: 20px; font-size: 16px; color: #fff; text-align: center; z-index: 1;}
.imgbox-left-box .img-sch{display: none;}
.imgbox-left-box .img-sc:hover,.imgbox-left-box .img-sch:hover{color:#00a151;}
.imgbox-left-box .img-sc i,.imgbox-left-box .img-sch i{position: absolute; top: 7px; left: 7px; display: inline-block; width: 25px; height: 25px; background: url(../images/xgt_xbt.png) no-repeat center; background-position: 0 -546px;}
.imgbox-left-box .img-sch i{background-position: 0 -546px;}
.imgbox-left-prev,.imgbox-left-next{width: 55%; height: 80%; position: absolute; top: 0; }
.imgbox-left-prev{left: 0;cursor: url(../images/left.ico),auto !important; opacity:0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
.imgbox-left-next{right:0; cursor: url(../images/right.ico),auto !important; opacity:0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
.imgbox-left .imgList{width:100%; height: 90px; padding-top: 14px; position: absolute; bottom: -94px;}
.imgbox-left .imgList .imgList-left,.imgbox-left .imgList .imgList-right{position: absolute; top: 14px;height: 100%;width:28px; height: 80px; background: url(../images/xgt_xbt.png) no-repeat; cursor: pointer;}
.imgbox-left .imgList .imgList-right{background-position:-101px -385px; right: 0;}
.imgbox-left .imgList .imgList-left{background-position:-101px -275px;left: 0;}
.imgbox-left .imgList .imgList-box{ width: 94%; height: 80px; margin-left: 3%; overflow: hidden;}
.imgbox-left .imgList .imgList-li{float: left; width: 76px; height: 76px; margin-left: 10px; border:2px solid transparent;}
.imgbox-left .imgList .imgList-li.active{ border:2px solid #00a151;}
.imgbox-left .imgList .imgList-li img{width: 100%; height: 100%;}
.img-from{ position: absolute; bottom: 0;width: 810px; height: 60px; /*background: #fff;*/ left: 50%; margin-left: -405px; padding-top:20px ;}
.img-from.img-fromSM{width:500px;height:96px;margin-left:-250px;padding:0; text-align: center;}
.img-from .img-from-price{display: inline-block; font-size: 18px; font-weight: bold; }
.img-from .img-from-price .price{font-size: 24px;}
.img-from .img-from-price i{font-weight:100 ; color: #282828;}
.img-from .img-from-biao{display: inline-block; width: 198px; height: 40px; line-height: 40px; border: 1px solid #00a151; color: #00a151; border-radius: 3px; text-align: center; cursor: pointer; margin-right: 20px;}
.img-from .img-from-biao:hover{background: #00a151; color: #fff;}
.img-from .img-from-baojia{}
.img-from .img-from-sheji{}
.sr-bdimgshare-list,.bdselect_share_head,.bdselect_share_content{display: none!important;}
.relocation{display: none!important;}
.imgbox-right {background: #fff; position: absolute;top: 0;right: 0;width: 280px;height:auto;overflow-x:hidden;overflow-y:auto; z-index: 0;}
.pic_container.full .pic_right_content {visibility:hidden;}
.pic_container.full .img_content {margin-right: 0;}
.pic_container.full .custom_scroll {display: none;}
.img_content {padding:10px; background:#fff;font-size: 12px;min-height: 300px;margin-right: 265px;position: relative;z-index: 1;}
.case_pic_top{ width:100%; background:none;}
.galleria-thumbnails-container{ background:#505050; padding:7px 5px; height:auto;}
.galleria-thumbnails .galleria-image{ width:60px; height:60px;}
.notouch .galleria-thumb-nav-left:hover, .notouch .galleria-thumb-nav-right:hover{ background:#999;}
.galleria-thumb-nav-left, .galleria-thumb-nav-right{top:15px; background-color:#f0f0f0; margin:0px 5px;}

复制代码

灰儿 · 发表于 2017-10-13 21:47:59

一起装修网效果图内容页带缩略图轮播实现方法
http://www.admin365.cn/thread-41572-1-1.html