欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > 织梦CMS内容页如何实现点击图片放大功能
这篇文章主要为大家详细介绍了织梦CMS内容页如何实现点击图片放大功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

361模板小编在浏览网上不少网站网页的时候都会发现这样的一种效果,页面内容里的图片点击会放大显示,那么织梦CMS的内容页能实现点击图片放大功能吗?回答是肯定的,下面361模板就带大家来实现织梦CMS内容页点击图片放大功能。

织梦CMS内容页如何实现点击图片放大功能

一、首先引入jquery及 lighter js

这个大家可以到官网去下载,也可以使用361模板的前端库,jquery.lighter文件361模板已经压缩打包准备好,大家可以下载使用

链接: https://pan.baidu.com/s/1xeuz6oIKuwGLGpkk99xh4A   密码: w2yq

二、修改文章页模板中的调用语句{dede:field.body}

这里的修改比较简单,没什么技术含量,直接就是正则替换在img图片前面加一个超链接 ,其中可以修改成任意的你自己的代码,其实a中还可以加入两个参数:data-height="720" 以及data-width="1280"两个,至于什么效果和含义你测试完成自己就会明白。

{dede:field.body runphp="yes"}
$a = @me;$a = preg_replace('/<s*imgs+[^>]*?srcs*=s*('|")(.*?)\1[^>]*?/?s*>/i','<a data-lighter="\2″ href="\2″><img src="\2″> </a>',$a);@me = $a;
{/dede:field.body}

经过上面的修改后就可以实现效果了,如果想实现第一个图片中的小图片在左边然后点击放大图片的效果,只需要在你的css代码中插入:

.content .bdimg{display: block;float: left;margin-right: 3.57866%;width: 22.316%; }
.content .bdimg:last-child {margin-right: 0; }
.content .bdimg img {width: 100%; }

这样就可以了, 其中contentbdimg换成你自己的样式标签。


以上就是织梦CMS内容页如何实现点击图片放大功能的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 织梦 内容页 点击图片放大

上一篇Php.ini文件位置在哪里,怎么找到php.ini

下一篇DEDE织梦做中英文多语言站操作方法实例

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在