DedeCMS實現(xiàn)LightBox效果的方法?這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
專業(yè)領域包括成都網(wǎng)站設計、網(wǎng)站建設、外貿(mào)網(wǎng)站建設、商城系統(tǒng)網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā), 與其他網(wǎng)站設計及系統(tǒng)開發(fā)公司不同,創(chuàng)新互聯(lián)公司的整合解決方案結合了幫做網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念,并將策略和執(zhí)行緊密結合,為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。
DedeCMS怎么實現(xiàn)LightBox效果?
網(wǎng)站上的圖片展現(xiàn)方式有很多種,一般的就是在瀏覽器為圖片鏈接多開一個窗口或標簽,像訪問網(wǎng)址一樣顯示出來,但是這種方式的體驗較差。畢竟,當訪問者每次查看圖片的時候還需要再彈出一個窗口來顯示,除了占用資源,還降低了圖片和內(nèi)容的關聯(lián)度,同時提高了用戶的操作次數(shù),在一定程度上降低了用戶的體驗。
LightBox介紹
LightBox圖片展示效果的出現(xiàn),則改變了傳統(tǒng)的圖片瀏覽方式,極大地提高了用戶的體驗。LightBox的原理很簡單:通過jQuery在當前頁面之上彈出一個層,并遮擋(降低亮度)非彈出層的部份,然后把圖片顯示在彈出層內(nèi),這種方式的好處就是查看圖片的時候頁面不會刷新,更不會跳到另一個窗口或標簽。而且還有一個體驗相當棒的功能,當你點擊非彈出層的部份時,腳本會關閉LightBox的彈出層,
LightBox圖片展示效果的功能也分很多,比如有些只是簡單地放大圖片,有些提供了縮放功能,有些提供了前一張、后一張圖片查看的功能……等等,但是基本的實現(xiàn)方式都是類似的。
接下來通過簡單的幾個步驟說明,為織夢CMS頁面上的圖片添加LightBox展示效果。
上傳文件及添加代碼
首先,下載LightBox插件的源代碼,該份源代碼包括有一個index.htm示例頁面以及相關的JS、CSS文件。把除index.htm文件的整個lightbox目錄上傳至DedeCMS的默認模板(Default)目錄下,再將下面所示的代碼復制到默認模板(Default)目錄下的article_image.htm文件內(nèi),放在
之間:上面這部份代碼即是LightBox源代碼中index.htm文件內(nèi)的一部份,只是在復制到DedeCMS模板文件的時候注意一下JS文件的調用路徑。
完成這兩步后,即可在DedeCMS的圖片展示模塊中實現(xiàn)LightBox效果,如果打算在織夢內(nèi)容管理系統(tǒng)的文章模塊或軟件下載模塊也實現(xiàn)LightBox效果,建議把上面的代碼添加到head.htm文件中,這樣就可以保證凡是調用了head.htm的文件都實現(xiàn)LightBox效果。
感謝各位的閱讀!看完上述內(nèi)容,你們對DedeCMS實現(xiàn)LightBox效果的方法大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。