欧美三级日韩三级,中文字幕中文字幕在线中一区高清

主頁 > 知識庫 > lightbox 效果 lbs窗口在本地打開

lightbox 效果 lbs窗口在本地打開

最近在 LBS 交流論壇找到一個(gè)很 cool 的頁面特效。就是Lightbox。用該方法處理過的圖片，預(yù)覽效果很 cool 呀。大家可以點(diǎn)擊下面的圖試用一下。具體方法在后面
首先請將所提供的壓縮包內(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è)文件（如果希望在其它頁面中也使用這種效果均可以參照修改）

　　找到如下代碼：
<div id="mainWrapper">
<div id="content" class="content">

　　在之上加入如下代碼
<script type="text/javascript" src="lightbox.js"></script>

　　最后修改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>';  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 re=/\[img=(left|right|center)\]([^<>]*?)\[\/img\]/ig;  
 while ((arrMatch = re.exec(str)) != null){  
 var strAlign=arrMatch[1];  
 var strURL=func.checkURL(arrMatch[2]);  
 if(strURL.indexOf("://")<0) strURL=baseURL+strURL;  
 strURL=func.URLEncode(strURL);  
 var newStr="";  
 if(strAlign=="center"){  
 newStr='<center><a href="'+strURL+'" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" /></a></center>';  
 }else{  
 newStr='<a href="'+strURL+'" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" style="float: '+strAlign+';" /></a>';  
 }  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 re=/\[img=(\d*|),(\d*|)(,left|,right|,center|,absmiddle|)\]([^<>]*?)\[\/img\]/ig;  
 while ((arrMatch = re.exec(str)) != null){  
 var strWidth=arrMatch[1];  
 var strHeight=arrMatch[2];  
 var strAlign=arrMatch[3].slice(1);  
 var strURL=func.checkURL(arrMatch[4]);  
 if(strURL.indexOf("://")<0) strURL=baseURL+strURL;  
 strURL=func.URLEncode(strURL);  
 var newStr="";  
 if(strAlign=="center"){  
 newStr='<center><a href="'+strURL+'" target="_blank"><img src="'+strURL+'" width="'+strWidth+'" height="'+strHeight+'" alt="'+strURL+'" /></a></center>';  
 }else{  
 newStr='<a href="'+strURL+'" target="_blank"><img src="'+strURL+'" width="'+strWidth+'" height="'+strHeight+'" style="float: '+strAlign+';" alt="'+strURL+'" /></a>';  
 }  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 }else if(bImage=="2"){  
 re=/\[img([^\]]*)\]([^<>]*?)\[\/img\]/ig;  
 while ((arrMatch = re.exec(str)) != null){  
 var strURL=func.checkURL(arrMatch[2]);  
 if(strURL.indexOf("://")<0) strURL=baseURL+strURL;  
 strURL=func.URLEncode(strURL);  
 var newStr='<a href="'+strURL+'" target="_blank"><img src="'+imageFolder+'/icon_image.gif" alt="Image" /> '+strURL+'</a>';  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 } 

　　修改為如下代碼：

復(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+'" rel="lightbox" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" /></a></div>';  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 re=/\[img=(left|right|center)\]([^<>]*?)\[\/img\]/ig;  
 while ((arrMatch = re.exec(str)) != null){  
 var strAlign=arrMatch[1];  
 var strURL=func.checkURL(arrMatch[2]);  
 if(strURL.indexOf("://")<0) strURL=baseURL+strURL;  
 strURL=func.URLEncode(strURL);  
 var newStr="";  
 if(strAlign=="center"){  
 newStr='<center><a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" /></a></center>';  
 }else{  
 newStr='<a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" style="float: '+strAlign+';" /></a>';  
 }  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 re=/\[img=(\d*|),(\d*|)(,left|,right|,center|,absmiddle|)\]([^<>]*?)\[\/img\]/ig;  
 while ((arrMatch = re.exec(str)) != null){  
 var strWidth=arrMatch[1];  
 var strHeight=arrMatch[2];  
 var strAlign=arrMatch[3].slice(1);  
 var strURL=func.checkURL(arrMatch[4]);  
 if(strURL.indexOf("://")<0) strURL=baseURL+strURL;  
 strURL=func.URLEncode(strURL);  
 var newStr="";  
 if(strAlign=="center"){  
 newStr='<center><a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+strURL+'" width="'+strWidth+'" height="'+strHeight+'" alt="'+strURL+'" /></a></center>';  
 }else{  
 newStr='<a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+strURL+'" width="'+strWidth+'" height="'+strHeight+'" style="float: '+strAlign+';" alt="'+strURL+'" /></a>';  
 }  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 }else if(bImage=="2"){  
 re=/\[img([^\]]*)\]([^<>]*?)\[\/img\]/ig;  
 while ((arrMatch = re.exec(str)) != null){  
 var strURL=func.checkURL(arrMatch[2]);  
 if(strURL.indexOf("://")<0) strURL=baseURL+strURL;  
 strURL=func.URLEncode(strURL);  
 var newStr='<a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+imageFolder+'/icon_image.gif" alt="Image" /> '+strURL+'</a>';  
 str=str.replace(arrMatch[0],newStr);  
 re.lastIndex+=newStr.length-arrMatch[0].length;  
 }  
 } 

========================================
　　后記：這種效果已經(jīng)開始在很多個(gè)人博客上流行起來，目前唯一的缺點(diǎn)就是，需要在頁面完整載入的時(shí)候才能點(diǎn)擊圖片出現(xiàn)這種效果，只要頁面上有一些失效的圖片地址，造成頁面載入遲緩或者停頓就無法出現(xiàn)。只有點(diǎn)擊瀏覽器上的叉叉手動終止頁面載入才能恢復(fù)。那么為了能持續(xù)扮酷，經(jīng)常性的去清理下失效的圖片吧。HOHO。
3、lightbox 效果與圖片自動縮放的整合修改
　　關(guān)于自適應(yīng)圖片大小和 lightbox 是可以共存的。首先修改好自適應(yīng)圖片大小。然后添加 lightbox 效果只需要更改下class/ubbcode.asp 的修改方法。即不要整段復(fù)制我所提供的修改后的代碼。而是手動在 ubbcode.asp 中所有圖片的鏈接代碼上添加 rel="lightbox" 。

　　簡單的一個(gè)例子，沒有添加自適應(yīng)圖片大小的圖片鏈接代碼
<a href="'+strURL+'" target="_blank">
　　將其改為
<a href="'+strURL+'" rel="lightbox" target="_blank">
　　。。添加自適應(yīng)圖片大小效果后，也只要照樣修改相應(yīng)的圖片鏈接代碼。其他的修改內(nèi)容不需要改變！

　　我在修改好lightbox效果后修正圖片大小自適應(yīng)時(shí)的參考代碼，在ubbcode.asp 找到以下代碼：
var newStr='<div style="width: 100%;overflow-x : auto;"><a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+strURL+'" alt="'+strURL+'" /></a></div>';
　　將其改為
var newStr='<div style="width: 100%;"><a href="'+strURL+'" rel="lightbox" target="_blank"><img src="'+strURL+'" onload="javascript:if(this.width>500)this.width=500;" alt="如果圖片縮小請點(diǎn)擊放大！生活的理想，就是為了理想的生活！ ∽生活筆談∽ Http://LifeBlog.Zj.Com " /></a></div>';
lightbox本地下載

標(biāo)簽：上海吳忠廣安陜西保定內(nèi)蒙古清遠(yuǎn) 山南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《lightbox 效果 lbs窗口在本地打開》，本文關(guān)鍵詞 lightbox,效果,lbs,窗口,在,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。