lightbox 效果 lbs窗口在本地打開

2019-11-02 17:00:34

字體：大中小

來源：轉載

供稿：網友

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

首先請將所提供的壓縮包內所有圖片文件上傳到你的空間上，比如：images。

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

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

復制代碼代碼如下:

/****** 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 兩個文件（如果希望在其它頁面中也使用這種效果均可以參照修改）

　　找到如下代碼：

　　在之上加入如下代碼

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

　　找到如下代碼：

復制代碼代碼如下:

// 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 個人空間二級域名轉向處理程序

下一篇：Window XP用戶安裝科訊關于權限問題必看教程

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注