织梦缩略图完美优化

相信很多站长都在头痛如何处理缩略图的问题吧。织梦系统默认是将缩略图缩小为小于等于后台设置的尺寸。因为原图片的尺寸都是不一样的,如果前台是固定图片框显示,那么一定显示不好看。图片会变形。因此,很多站长为了网站美观,就手动修改。想想这工程浩大
      相信很多站长都在头痛如何处理缩略图的问题吧。织梦系统默认是将缩略图缩小为小于等于后台设置的尺寸。
      因为原图片的尺寸都是不一样的,如果前台是固定图片框显示,那么一定显示不好看。图片会变形。因此,很多站长为了网站美观,就手动修改。想想这工程浩大啊。
      那么有什么既方便又实用的办法呢?

Abing给出的优化方案是这样的:
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="图片地址" />

只要这样四步,就完美搞定缩略图问题啦。


我的网站所有缩略图均非手工处理。可以访问我的网站——旧物格网 查看实际效果。
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

当文章有缩略图时显示文章的缩略图;当文章没有缩略图时,就随机显示我们给出的几百张缩略图中的一张。这样一来列表页面的文章都有缩略图,同时还都不一样。 [field:array runphp=yes]@me = (strpos(@me[litpic],defaultpic) ? a class=focus href={@me[arcu
织梦dedecms,首页幻灯片我需要做的比较大,但是默认调用的是缩略图,幻灯片显示就不清楚了。网上找了半天解决方法,有的偷懒的做法,是把缩略图改大一点,有的比较麻烦的是,要修改数据库,添加一个字段保存大图的路径。效果都不太好。 最后我还是决定自立
织梦系统使用很简单,创建栏目,发布文章,生成栏目和文章就可以了。但事实上织梦默认设置的话直接创建的栏目是不利于百度收录的,所以我们需要优化一下织梦的栏目。 优化栏目的方法很简单,注意几点就可以了。 1、创建个栏目,例如创建顶级栏目新闻中心,