婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 網站建設 > 建站知識 > 簡單幾步為DedeCMS實現LightBox效果

簡單幾步為DedeCMS實現LightBox效果

POST TIME:2020-04-03 15:34

點評:這篇文章主要介紹的是如何為DedeCMS的圖片添加LightBox展示效果,其它的網頁實現方法基本類似
 
網站上的圖片展現方式有很多種,一般的就是在瀏覽器為圖片鏈接多開一個窗口或標簽,像訪問網址一樣顯示出來,但是這種方式的體驗較差。畢竟,當訪問者每次查看圖片的時候還需要再彈出一個窗口來顯示,除了占用資源,還降低了圖片和內容的關聯度,同時提高了用戶的操作次數,在一定程度上降低了用戶的體驗。

LightBox介紹
LightBox圖片展示效果的出現,則改變了傳統的圖片瀏覽方式,極大地提高了用戶的體驗。LightBox的原理很簡單:通過jQuery在當前頁面之上彈出一個層,并遮擋(降低亮度)非彈出層的部份,然后把圖片顯示在彈出層內,這種方式的好處就是查看圖片的時候頁面不會刷新,更不會跳到另一個窗口或標簽。而且還有一個體驗相當棒的功能,當你點擊非彈出層的部份時,腳本會關閉LightBox的彈出層,

LightBox圖片展示效果的功能也分很多,比如有些只是簡單地放大圖片,有些提供了縮放功能,有些提供了前一張、后一張圖片查看的功能……等等,但是基本的實現方式都是類似的。

接下來通過簡單的幾個步驟說明,為織夢CMS頁面上的圖片添加LightBox展示效果。

上傳文件及添加代碼
首先,下載LightBox插件的源代碼,該份源代碼包括有一個index.htm示例頁面以及相關的JS、CSS文件。把除index.htm文件的整個lightbox目錄上傳至DedeCMS的默認模板(Default)目錄下,再將下面所示的代碼復制到默認模板(Default)目錄下的article_image.htm文件內,放在<head></head>之間:

上面這部份代碼即是LightBox源代碼中index.htm文件內的一部份,只是在復制到DedeCMS模板文件的時候注意一下JS文件的調用路徑。

完成這兩步后,即可在DedeCMS的圖片展示模塊中實現LightBox效果,如果打算在織夢內容管理系統的文章模塊或軟件下載模塊也實現LightBox效果,建議把上面的代碼添加到head.htm文件中,這樣就可以保證凡是調用了head.htm的文件都實現LightBox效果。



收縮
  • 微信客服
  • 微信二維碼
  • 電話咨詢

  • 400-1100-266
主站蜘蛛池模板: 紫阳县| 靖宇县| 鹰潭市| 镇雄县| 颍上县| 滦平县| 新民市| 沈阳市| 佛教| 三穗县| 陇川县| 和林格尔县| 婺源县| 论坛| 商南县| 谢通门县| 张家界市| 新沂市| 中宁县| 晴隆县| 肥城市| 巴东县| 南川市| 广元市| 涡阳县| 水城县| 灌阳县| 启东市| 榆树市| 玉屏| 开封市| 娱乐| 云南省| 肃南| 新郑市| 遵义市| 绥棱县| 永顺县| 铁岭市| 莎车县| 安乡县|