欢迎来到欣怡建站!我们致力于提供优质的网站建站服务
注册

Dedecms织梦缩略图完美优化

相关案例演示

相信很多织梦dedecms 站长都在头痛如何处理缩略图的问题吧。织梦dedecms系统默认是将缩略图缩小为小于等于后台设置的尺寸。

     
因为原图片的尺寸都是不一样的,如果前台是固定图片框显示,那么一定显示不好看。图片会变形。因此,很多站长为了dedecms 网站美观,就手动修改。

想想这工程浩大啊。

     
那么有什么既方便又实用的办法呢?

 

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=http://www.dede58.com/a/dedejq/"图片地址" />

 

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

作者:欣怡建站 挑错 时间:2020-02-14 08:47
首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(984818011)进行交流。
相关教程
在线客服