首頁 > CMS建站 > 織夢DEDE > 正文

織夢cms內容頁實現圖片點擊放大的效果

2020-07-02 22:09:37
字體:
來源:轉載
供稿:網友
這篇文章主要為大家詳細介紹了織夢cms內容頁實現圖片點擊放大的效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下,有需要的朋友可以收藏方便以后借鑒。

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

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

以上就是織夢cms內容頁實現圖片點擊放大的效果的全部內容,希望對大家的學習和解決疑問有所幫助,也希望大家多多支持錯新網。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
金玫玫床戏