织梦cms内容页实现图片点击放大的效果

厨房卫浴水龙头网站模板

响应式美食糕点企业网站模板

响应式自动化设备科技企业网站模板

响应式电子商务公司网站模板
(自适应手机版)黄色响应式车行汽车租赁网站pbootcms模

(自适应手机端)响应式pbootcms装修设计装潢公司网站模

(自适应手机端)响应式别墅办公家庭装修装饰设计类pboo

(自适应手机端)品牌策划设计类网站pbootcms模板高端
迪恩摄影Pai(7配色) 商业版（GBK）

律师事务所法务咨询网站模板

响应式红木实木家具网站模板

迪恩car!汽车二手车交易Discuz模板 X3.2商业版

首先引入jquery及 lighter js你可以下载换成最新的版本

可以到他们的官网下载或者下载我发的附件 jquery.lighter.zip

附件中没有第一个js文件你自己到他官网下载或者直接引用他们官网的。

模板中修改

{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=http://www.dede58.com/a/dedejq/"\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%; }

就可以了，其中content及bdimg换成你自己的。

如果还想实现上一幅图片下一幅图片，建议到人家官网研究。

作者：欣怡建站挑错时间：2020-06-11 08:36

☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ(984818011)进行交流。