dedecms怎么實(shí)現(xiàn)lightbox效果?
網(wǎng)站上的圖片展現(xiàn)方式有很多種,一般的就是在瀏覽器為圖片鏈接多開(kāi)一個(gè)窗口或標(biāo)簽,像訪問(wèn)網(wǎng)址一樣顯示出來(lái),但是這種方式的體驗(yàn)較差。畢竟,當(dāng)訪問(wèn)者每次查看圖片的時(shí)候還需要再?gòu)棾鲆粋€(gè)窗口來(lái)顯示,除了占用資源,還降低了圖片和內(nèi)容的關(guān)聯(lián)度,同時(shí)提高了用戶的操作次數(shù),在一定程度上降低了用戶的體驗(yàn)。
推薦:《dedecms使用教程》
LightBox介紹
LightBox圖片展示效果的出現(xiàn),則改變了傳統(tǒng)的圖片瀏覽方式,極大地提高了用戶的體驗(yàn)。LightBox的原理很簡(jiǎn)單:通過(guò)jquery在當(dāng)前頁(yè)面之上彈出一個(gè)層,并遮擋(降低亮度)非彈出層的部份,然后把圖片顯示在彈出層內(nèi),這種方式的好處就是查看圖片的時(shí)候頁(yè)面不會(huì)刷新,更不會(huì)跳到另一個(gè)窗口或標(biāo)簽。而且還有一個(gè)體驗(yàn)相當(dāng)棒的功能,當(dāng)你點(diǎn)擊非彈出層的部份時(shí),腳本會(huì)關(guān)閉LightBox的彈出層,
LightBox圖片展示效果的功能也分很多,比如有些只是簡(jiǎn)單地放大圖片,有些提供了縮放功能,有些提供了前一張、后一張圖片查看的功能……等等,但是基本的實(shí)現(xiàn)方式都是類似的。
接下來(lái)通過(guò)簡(jiǎn)單的幾個(gè)步驟說(shuō)明,為織夢(mèng)cms頁(yè)面上的圖片添加LightBox展示效果。
上傳文件及添加代碼
首先,下載LightBox插件的源代碼,該份源代碼包括有一個(gè)index.htm示例頁(yè)面以及相關(guān)的JS、css文件。把除index.htm文件的整個(gè)lightbox目錄上傳至DEDECMS的默認(rèn)模板(default)目錄下,再將下面所示的代碼復(fù)制到默認(rèn)模板(Default)目錄下的article_image.htm文件內(nèi),放在
之間:
上面這部份代碼即是LightBox源代碼中index.htm文件內(nèi)的一部份,只是在復(fù)制到DedeCMS模板文件的時(shí)候注意一下JS文件的調(diào)用路徑。
完成這兩步后,即可在DedeCMS的圖片展示模塊中實(shí)現(xiàn)LightBox效果,如果打算在織夢(mèng)內(nèi)容管理系統(tǒng)的文章模塊或軟件下載模塊也實(shí)現(xiàn)LightBox效果,建議把上面的代碼添加到head.htm文件中,這樣就可以保證凡是調(diào)用了head.htm的文件都實(shí)現(xiàn)LightBox效果。