tengxunyun tengxunyun

WordPress+Kindeditor 插件实现图片点击放大的效果

WordPress+Kindeditor 插件实现图片点击放大的效果

首先呢。你需要安装两个插件

羊毛党之家 WordPress+Kindeditor 插件实现图片点击放大的效果  https://yangmaodang.org

设置一下WP  FancyZoom

 

设置一下Kindeditor 的js 因为 WP  FancyZoom 需要如下的标签才能显示成功:

<a href="http://www.o2oxy.cn/wp-content/uploads/2018/07/TIM截图20180706134724.png"><img src="http://www.o2oxy.cn/wp-content/uploads/2018/07/TIM截图20180706134724.png" alt="" /></a>

而默认的Kindeditor 写入图片的格式如下:

<img src="http://pic1.win4000.com/wallpaper/e/57a84fd30b944.jpg" alt="" />

默认是一个img 标签。这个就需要改造一下Kindeditor  JS 了

首先找到那个js

羊毛党之家 WordPress+Kindeditor 插件实现图片点击放大的效果  https://yangmaodang.org

编辑这个JS

找到

<img src="'+
C(a)+'" data-ke-src="'+C(a)+'" ';c&&(a+='width="'+C(c)+'" ');d&&(a+='height="'+C(d)+'" ');b&&(a+='title="'+C(b)+'" ');g&&(a+='align="'+C(g)+'" ');a+='alt="'+C(b)+'" ';a+="/>

在img 前面加一个a 标签如下:

<a href="'+C(a)+'"><img src="'+
C(a)+'" data-ke-src="'+C(a)+'" ';c&&(a+='width="'+C(c)+'" ');d&&(a+='height="'+C(d)+'" ');b&&(a+='title="'+C(b)+'" ');g&&(a+='align="'+C(g)+'" ');a+='alt="'+C(b)+'" ';a+="/></a>";

完整的文件如下:

https://www.o2oxy.cn/wp-content/plugins/kindeditor-for-wordpress/kindeditor.js

更新完成之后,可以新建一个文章。

羊毛党之家 WordPress+Kindeditor 插件实现图片点击放大的效果  https://yangmaodang.org

然后打开发布文章。点击一下就好了!!!!!

具体的效果如下:

羊毛党之家 WordPress+Kindeditor 插件实现图片点击放大的效果  https://yangmaodang.org

cloudiplc

相关推荐

微信扫一扫,分享到朋友圈

WordPress+Kindeditor 插件实现图片点击放大的效果
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close