瀏覽有的網(wǎng)站文章的時(shí)候,發(fā)現(xiàn)圖文中的圖片是可以點(diǎn)擊放大的,這樣可以更清楚的看圖片的內(nèi)容,對(duì)用戶體驗(yàn)很好。
首先引入jquery及 lighter js你可以下載換成最新的版本,可以到他們的官網(wǎng)下載或者下載余斗準(zhǔn)備好的附件:
jquery.lighter.zip
然后我們需要修改文章頁模板中的調(diào)用語句:{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*('|")(.*?)[^>]*?/?s*>/i','<a data-lighter="″ href="″><img src="″> </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)研究看下。
新聞熱點(diǎn)
疑難解答
圖片精選