论坛 Forum

这是效果demo：Demo.rar

 

需要用到的文件 （项目中用这里的文件，我在js里加了一些东西，以便支持KindEdit）：需要使用的文件.rar

 我项目里的效果：

滚动放大

 

下载

因为这个功能需要图片有id和class，所以我们首先给KindEdit上传的图片加上onclick、id和class，因为没时间去改KindEdit内部的实现代码，所以我使用了一个投机取巧的办法，菜鸟一枚，大家多指教。

 

下面是实现代码（ 注意，项目中要用jquery1.6或更高版本，因为1.6之前，不支持$(this).attr("onclick","")  ）

首先，在KindEdit初始化时，定义htmlTags（解释：http://kindeditor.net/docs/option.html#htmltags）

因为需要img标签有id,onclick,class，但是默认是没有的(默认：img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'])，

所以修改下img的参数：img : ['id','onclick','class','src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'] 

 

 

在页面加一个div

<div style="display: none;" id="getcon"></div>

这个div是临时保存KindEdit 编辑器里的内容的

$("#getcon").html(editor1.html());//获取KindEdit 编辑器里的内容，保存到getcon
var imgj = 1;

$('#getcon img').each(function(){//循环getcon下的img标签

$(this).attr("onclick","zoom(this, this.src, 0, 0, 0)");

if($(this).attr("title")==""||$(this).attr("title")=="undefined"||$(this).attr("title")==null){

    $(this).attr("title","点击图片浏览大图，滚动鼠标放大");//如果没有title随便给一个

}
$(this).attr("id","aimg_"+imgj);

// alert($(this).html()+"--"+$(this).attr("onclick"));

 imgj++;

});

 

editor1.html($("#getcon").html();//把处理过的内容重新赋值给KindEdit

 

文章展示页面：

 

<style>
#con img{cursor: pointer;}定义文章里图片的鼠标指针是手型
</style>

<link rel="stylesheet" type="text/css" href="<%=basePath %>img/style_1_forum_viewthread.css" />
<script type="text/javascript">var IMGDIR = '<%=basePath %>img/', VERHASH = 'zfhf', JSPATH = '<%=basePath %>js/';</script>
<script src="<%=basePath %>js/common.js" type="text/javascript"></script>
<script src="<%=basePath %>js/forum_viewthread.js" type="text/javascript"></script>
<script type="text/javascript">
zoomstatus = parseInt(1);
var imagemaxwidth = '500';//控制图片初始宽度
var aimgcount = new Array();
</script>

 在body结束前( </boody>之前)加入以下内容：

<div id="append_parent"></div><div  id="ajaxwaitid"></div>
<script type="text/javascript" reload="1">
var zoomi = $("#con img").length;  //#con  是我的网站文章所在的div的ID
var newarr = new Array();
for (var i =1;i<=zoomi;i++){
  newarr[i]=[i];
}
aimgcount[1]=newarr;//edit 2014年4月30日23:51:56
attachimggroup(1);
attachimgshow(1);
var aimgfid = 0;

</script>

 

 

结束

 

 

实现之后，我想，能不能在文章展示页面直接用jquery循环文章所在id里的img  ，然后设置id、class、onclick,可是我试了，点击图片没有反应，不知道为啥。算了不折腾了，实现就好了，不在页面写，页面的js倒也干净些。如果谁设置成功了，请告诉我。谢谢！

over.