導讀:織夢技術織夢技術圖片:QQ截圖20130914141342.png上面是點擊以前的，先發下效果圖，下面的是點擊左側圖片后的放大效果效果就是上面的兩個圖發代碼首先引入jquerydede免費校板下戰織夢手機模板。

首先引入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}

經過上面的修改后就可以實現效果了，如果想實現第一個圖片中的“小圖片在左邊然后點擊放大圖片的效果 ”只需要在你的cs織夢模板s代碼中插入

.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換成你自己的。

如果還想實現上一幅圖片 下一幅圖片，建議到人家官網研究 。

竣工。

相關dede免費校板下戰織夢手機模板。

關鍵詞標簽: 織夢 標簽 效果