这是效果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++){
newvar[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.