织梦缩略图完美优化

天外飘仙

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

Abing给出的优化方案是这样的：
1、在后台设置缩略图尺寸，设置成前台最大固定框的尺寸。
2、使织梦提取的缩略图大于等于后台设置的尺寸，也就是将原图等比例缩小成不是宽等于设置尺寸就是高等于。
3、编写JS函数，前台显示缩略图的时候，使图片总是水平垂直显示，DIV不被撑开。
这个应该是综合最优的方案了，而且一次搞定终身受益。下面我就把详细教程贴出来。

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


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

1. if($toWH<=$srcWH)
   
2. {
   
3. $ftoW=$toW;
   
4. $ftoH=$ftoW*($srcH/$srcW)
   
5. }
   
6. else
   
7. {
   
8. $ftoH=$toH
   
9. $ftoW=$ftoH*($srcW/$srcH)
   
10. }
    

复制代码

将if与else中的代码互换。



第三步：
编写一个JS函数。

1. function ImageShow(maxWidth,maxHeight,objImg){
   
2. var img=new Image();
   
3. img.src=objImg.src;
   
4. var w=img.width;
   
5. var h=img.height;
   
6. if(w==maxWidth&&h==maxHeight){
   
7. objImg.width=maxWidth;
   
8. objImg.height=maxHeight;
   
9. return
   
10. };
    
11. var b1=w/h;
    
12. var b2=maxWidth/maxHeight;
    
13. if(b1>b2){
    
14. objImg.height=maxHeight;
    
15. objImg.width=maxHeight/h*w;
    
16. objImg.style.marginLeft=-(maxHeight*w-
    
17. 
    
18. maxWidth*h)/(2*h)+'px'
    
19. }
    
20. else{
    
21. objImg.widt=maxWidth;
    
22. objImg.height=maxWidth/w*h;
    
23. objImg.style.margnTop=-(maxWidth*h-
    
24. 
    
25. maxHeight*w)/(2*w)+'px'
    
26. };
    
27. 
    
28. return
    
29. };

复制代码

第四步：
CSS，图片所在DIV，设置成图片要显示的宽和高，然后增加“voerflow:hidden”
图片显示调用上面的JS函数，具体如下：
<img onload="ImageShow(宽,高,this)" src="图片地址" />

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


我的网站所有缩略图均非手工处理。可以访问我的网站——旧物格网 查看实际效果。