| 动易文章图片自适应 |
|
| 作者：gohwu 文章来源：本站原创 点击数： 更新时间：2013-9-29 ★★★ |
|
|
动易文章图片自适应 最近在修改sw6.8图片内容页模板的时候，发现在文章中上传图片，如果图片够大，上传后，在文章显示出来却是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代码失效，这样即使出问题，页面也不会撑破了！
|
|
|
文章录入：gohwu 责任编辑：gohwu |
我要投稿 |
|
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
|
|
|
|
会员区*发表文章
您现在的位置： 吴氏网 >> 网建 >> 网建 >> 正文
网友评论：（评论内容只代表网友观点，与本站立场无关！）