欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > CMS技术 > 织梦模板美化教程之织梦缩略图完美优化
这篇文章主要为大家详细介绍了织梦模板美化教程之织梦缩略图完美优化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

       做网站的朋友都想拥有一个漂亮大气的网站(今天这里织梦模板小编暂时先抛弃代码优化不谈)。当然作为专业的 织梦模板生产商的织梦361网站也会十分在意一个网站美化程度。因此织梦模板的所有编辑就成了一个织梦模板优化小组,分批次的和大家介绍织梦模板美化的一系列的教程,该教程都是以织梦模板美化之的标题作为开头,希望有喜欢的朋友可以留言查看。

       今天我们作为织梦模板美化的第一讲,主要给大家介绍的是织梦美化中的一个重要的环节,织梦模板的缩略图问题。织梦系统默认是将缩略图缩小为小于等于后台设置的尺寸。但是因为我们发布的原始图片的尺寸都是不一样的,如果前台是固定图片框显示,那么一定显示不好看。图片会变形。因此,很多站长为了网站美观,就手动修改。但是想想就知道这是非常浩大的工程,想想就头疼。那么有什么既方便又实用的办法呢?当然是有的呢。

织梦361给出的优化方案是这样的:

1、在后台设置缩略图尺寸,设置成前台最大固定框的尺寸。

2、使织梦提取的缩略图大于等于后台设置的尺寸,也就是将原图等比例缩小成不是宽等于设置尺寸就是高等于。

3、编写JS函数,前台显示缩略图的时候,使图片总是水平垂直显示,DIV不被撑开。

这个应该是综合最优的方案了,而且一次搞定终身受益。下面我就把详细教程贴出来。

第一步:后台设置缩略图大小

这一步不需要详细述说了大家都会,下面看第二步。

第二步、修改image.helper.php页面

if($toWH<=$srcWH)
{
$ftoW=$toW;
$ftoH=$ftoW*($srcH/$srcW)
}
else
{
$ftoH=$toH
$ftoW=$ftoH*($srcW/$srcH)
}

将if与else中的代码互换

第三步:编写一个JS函数

function ImageShow(maxWidth,maxHeight,objImg){
var img=new Image();
img.src=objImg.src;
var w=img.width;
var h=img.height;
if(w==maxWidth&&h==maxHeight){
objImg.width=maxWidth;
objImg.height=maxHeight;
return
};
var b1=w/h;
var b2=maxWidth/maxHeight;
if(b1>b2){
objImg.height=maxHeight;
objImg.width=maxHeight/h*w;
objImg.style.marginLeft=-(maxHeight*w-maxWidth*h)/(2*h)+'px'
}
else{
objImg.widt=maxWidth;
objImg.height=maxWidth/w*h;
objImg.style.margnTop=-(maxWidth*h-maxHeight*w)/(2*w)+'px'
}; 
return
};

第四步:CSS控制,图片所在DIV,设置成图片要显示的宽和高

然后增加

“voerflow:hidden”

图片显示调用上面的JS函数,具体如下:

<img onload="ImageShow(宽,高,this)" src="图片地址" />

只要这样四步,就完美搞定缩略图问题啦。有兴趣的朋友可以尝试看看。

以上就是织梦模板美化教程之织梦缩略图完美优化的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

上一篇织梦模板更换后后台上传图片默认路径如何更改

下一篇织梦模板里的点击量如何批量修改 织梦批量修改文章随机点击量

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在