动易文章图片自适应大小

2009-09-07 浏览:1144
动易文章图片自适应大小
评论:(0)复制地址

最近在玩动易2006的时候,发现在文章中上传图片,如果图片够大,上传后,在文章显示出来却是100%原图的大小,导致叶面撑破!于是在图片频道发了一图,结果一样!

查看了动易的模板,发现动易是有JS来控制图片的大小和缩放,但js可以控制图片的无级缩放,但不能控制大图的等比缩小,看看代码也没有错,觉得奇怪!

于是到动易论坛搜索了一下,居然有大量的关于此问题,原本想找到解决方法,试了动易论坛上的方法,居然都不可行!于是只好自己动手,开始对动易小做研究,终于找到解决方法!

需要从文件和模板同时下手!

1. 先修改文件,主要有两个文件\editor\下面的editor_Modifypic.asp和editor_InsertPic.asp

先修改editor_Modifypic.asp文件!用记事本打开即可!

找到代码:

        if (sWidth!=""){
            sHTML=sHTML+' width="'+sWidth+'"';
        }
        if (sHeight!=""){
            sHTML=sHTML+' height="'+sHeight+'"';
        }

原来上传图片的宽度定义就是图片原来的大小,修改为下面代码,550这个数据按照你的模板自己定义合适大小,修改后的代码意思图片宽度大于550,那么宽度定义为550px,如果小于550,那么按图片实际大小定义!同时去掉了对高度的定义,这样可以等比缩小图片,不至于图片变形!

        if (sWidth > 550)
        {
            sHTML=sHTML+' width="550"';
        }
        if (sWidth < 550)
        {
            sHTML=sHTML+' width="'+sWidth+'"';
        }       
        if (sHeight!=""){
            sHTML=sHTML+'';
        }

修改后测试,非常成功!

接下来,修改editor_InsertPic.asp,这个主要是批量上传图片文件!

Response.Write "<td>图片宽度:<input name='width" & i & "' value='' ONKEYPRESS='event.returnValue=IsDigit();'

修改为

Response.Write "<td>图片宽度:<input name='width" & i & "' value='550' ONKEYPRESS='event.returnValue=IsDigit();'

就是给了550的自动输入!这里有个问题,就是如果是小于550的图会被放大!也没有好的修改,就是在传文件时小图自己设置一下属性!由于还有无级缩放的问题,最好修改一下文章内容模板。修改如下:

找到内容显示标签{$ArticleContent},给他加个层!修改为

<div style="overflow:hidden;width:550px;">
{$ArticleContent}
</div>

550这个宽度可以按照你的模板大小修改,这样在无级放大图片时,超过550的部分将被隐藏,而不至于撑破表格!

到这里为止修改的是文章频道中的图片显示!对图片频道的问题需要另外修改!方法如下:

图片频道内容模板

找到{$ViewPhoto(550)} ,这个不同模板参数可能不同。就是图片显示标签!{$ViewPhoto} ,2006的增加了参数,参数的意思就是图片最大的显示像素,可是实际应用时会出问题,而动易用JS来控制,相应部分JS代码删除会自动加入,可能是动易组件的缘故!目前找到的最理想的解决方法如下!

将下面代码加到图片频道的内容模板的最底部即可!

<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
imgObj = document.all(i)  
if (imgObj.width>550)
{
imgObj.width=550
}}}
</script>

如果不觉得麻烦,也可以给标签加上层!

<div style="overflow:hidden;width: 550px; z-index: 1; border: 1px solid #C0C0C0;">
{$ViewPhoto(550)}
</div>

大小自己定义,由于不同浏览器或一些广告联盟的代码会导致一些JS代码失效,这样即使出问题,叶面也不会撑破了

评论:(0)复制地址

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。