lightbox 效果 lbs窗口在本地打開(kāi)

2019-11-02 17:00:34

字體：大中小

供稿：網(wǎng)友

最近在 LBS 交流論壇找到一個(gè)很 cool 的頁(yè)面特效。就是Lightbox。用該方法處理過(guò)的圖片，預(yù)覽效果很 cool 呀。大家可以點(diǎn)擊下面的圖試用一下。具體方法在后面

首先請(qǐng)將所提供的壓縮包內(nèi)所有圖片文件上傳到你的空間上，比如：images。

　　然后修改壓縮包內(nèi)的 lightbox.js 文件，把 38，39 兩行的圖片地址修改為你剛剛上傳至的圖片地址，比如：images/close.gif 和images/loading.gif 。并把修改后的 lightbox.js 文件上傳到你的博客根目錄下。

　　接著將下面的代碼粘貼到你的博客所使用的風(fēng)格相關(guān)的 styles.css 文件中，其中要注意，下面這一段代碼中兩段 “images/overlay.png” 都要改成你自己的 overlay.png 文件的存放路徑。

復(fù)制代碼代碼如下:

/****** Lightbox Styles ******/

#lightbox{

background-color:#eee;

padding: 10px;

border-bottom: 2px solid #666;

border-right: 2px solid #666;

}

#lightboxDetails{

font-size: 0.8em;

padding-top: 0.4em;

}

#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}

#overlay img{ border: none; }

#overlay{ background-image: url(images/overlay.png); }

* html #overlay{

background-color: #000;

back/ground-color: transparent;

background-image: url(blank.gif);

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");

}

　　接著需要修改 default.asp 和 article.asp 兩個(gè)文件（如果希望在其它頁(yè)面中也使用這種效果均可以參照修改）

　　找到如下代碼：

　　在之上加入如下代碼

　　最后修改class/ubbcode.asp 文件（其實(shí)下面的修改只是在各類型的圖片鏈接上增加 rel="lightbox" 控制屬性，為了避免不必要的錯(cuò)誤，所以將整段代碼給與替換）

　　找到如下代碼：

復(fù)制代碼代碼如下:

// Process IMG Tags --------------------------------

if(bImage=="1"){

re=//[img/]([^<>]*?)/[//img/]/ig;

while ((arrMatch = re.exec(str)) != null){

var strURL=func.checkURL(arrMatch[1]);

if(strURL.indexOf("://")<0) strURL=baseURL+strURL;

strURL=func.URLEncode(strURL);

var newStr='<div style="width: 100%;overflow-x : auto;"><a href="'+strURL+'" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" /></a></div>';

上一篇：KesionCMSV4.0 個(gè)人空間二級(jí)域名轉(zhuǎn)向處理程序

下一篇：Window XP用戶安裝科訊關(guān)于權(quán)限問(wèn)題必看教程

學(xué)習(xí)交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)箱大愛(ài)...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注