織夢(mèng)cms內(nèi)容頁實(shí)現(xiàn)圖片點(diǎn)擊放大的效果

來源：本站原創(chuàng)|時(shí)間：2021-08-05|欄目：dedecms|點(diǎn)擊：次

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

可以到他們的官網(wǎng)下載或者下載我發(fā)的附件 jquery.lighter.zip

附件中沒有第一個(gè)js文件你自己到他官網(wǎng)下載或者直接引用他們官網(wǎng)的。

模板中修改

{dede:field.body}

修改后的代碼，沒什么技術(shù)含量就是正則替換在 img圖片前面加一個(gè)超鏈接，其中可以修改成任意的你自己的代碼，其實(shí)a中還可以加入兩個(gè)參數(shù)；data-height=’720′ 以及data-width=’1280′兩個(gè)，至于這兩個(gè)的效果可以到官方去看，網(wǎng)址：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}

經(jīng)過上面的修改后就可以實(shí)現(xiàn)效果了，如果想實(shí)現(xiàn)第一個(gè)圖片中的“小圖片在左邊然后點(diǎn)擊放大圖片的效果 ”只需要在你的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換成你自己的。

如果還想實(shí)現(xiàn)上一幅圖片下一幅圖片，建議到人家官網(wǎng)研究。

竣工。

上一篇：DEDECMS在列表頁中間隨機(jī)插入廣告

欄目：dedecms