POST TIME:2019-09-30 11:24
網(wǎng)站上的圖片展現(xiàn)方式有很多種，一般的就是在瀏覽器為圖片鏈接多開一個窗口或標(biāo)簽，像訪問網(wǎng)址一樣顯示出來，但是這種方式的體驗(yàn)較差。畢竟，當(dāng)訪問者每次查看圖片的時候還需要再彈出一個窗口來顯示，除了占用資源，還降低了圖片和內(nèi)容的關(guān)聯(lián)度，同時提高了用戶的操作次數(shù)，在一定程度上降低了用戶的體驗(yàn)。
LightBox介紹
LightBox圖片展示效果的出現(xiàn)，則改變了傳統(tǒng)的圖片瀏覽方式，極大地提高了用戶的體驗(yàn)。LightBox的原理很簡單：通過jQuery在當(dāng)前頁面之上彈出一個層，并遮擋(降低亮度)非彈出層的部份，然后把圖片顯示在彈出層內(nèi)，這種方式的好處就是查看圖片的時候頁面不會刷新，更不會跳到另一個窗口或標(biāo)簽。而且還有一個體驗(yàn)相當(dāng)棒的功能，當(dāng)你點(diǎn)擊非彈出層的部份時，腳本會關(guān)閉LightBox的彈出層。
LightBox圖片展示效果的功能也分很多，比如有些只是簡單地放大圖片，有些提供了縮放功能，有些提供了前一張、后一張圖片查看的功能……等等，但是基本的實(shí)現(xiàn)方式都是類似的。
接下來通過簡單的幾個步驟說明，為織夢CMS頁面上的圖片添加LightBox展示效果。
上傳文件及添加代碼
首先，下載LightBox插件的源代碼，該份源代碼包括有一個index.htm示例頁面以及相關(guān)的JS、CSS文件。把除index.htm文件的整個lightbox目錄上傳至DedeCMS的默認(rèn)模板(Default)目錄下，再將下面所示的代碼復(fù)制到默認(rèn)模板(Default)目錄下的article_image.htm文件內(nèi)，放在<head></head>之間：
<!-- Arquivos utilizados pelo jQuery lightBox plugin --><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jquery.lightbox-0.5.js"></script><linkrel="stylesheet"type="text/css"href="css/jquery.lightbox-0.5.css"media="screen"/><!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin --><!-- Ativando o jQuery lightBox plugin --><scripttype="text/javascript">$(function() { $('#gallery a').lightBox(); }); </script><styletype="text/css">/* jQuery lightBox plugin - Gallery style */ </style></head>
| ? |
|
|
|
|||||||||||||||
| 全國咨詢熱線 | |||||||||||||||||
| 400-1100-266 | |||||||||||||||||
| 在線客服( QQ：340506921 ) | |||||||||||||||||
 |
|||||||||||||||||
