各类知识收集,PHP技术分享与解决方案各类知识收集,PHP技术分享与解决方案各类知识收集,PHP技术分享与解决方案

Str Tom,为分享PHP技术和解决方案,贡献一份自己的力量!
收藏本站(不迷路),每天更新好文章!
当前位置:首页 > CMS教程 > dedecms

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

管理员 2017-07-28
dedecms
116

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

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

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

模板中修改

{dede:field.body}


修 改后的代码,没什么技术含量就是正则替换在 img图片前面加一个超链接 ,其中 可以修改成任意的你自己的代码,其实a中还可以加入两个参数;data-height=’720′ 以及data-width=’1280′两个,至于这两个的效果可以到官方去看,网址:http://ksylvest.github.io/jquery-lighter/

{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%; }

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

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

竣工。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除! 织梦图文

相关文档推荐

织梦安装使用织梦二次开发织梦优化织梦标签dedecms教程织梦安全 织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室

相关推荐

扫码关注

qrcode

QQ交谈

回顶部