• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    织梦cms内容页实现图片点击放大的效果
    POST TIME:2017-11-12 23:36

    首先引入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换成你自己的。

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

    竣工。

    
    关于我们 | 付款方式 | 建站知识 | 增值服务 | 网站模板
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!