lightbox 效果 lbs窗口在本地打开
作者：
lightbox 效果 lbs窗口在本地打开
最近在 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 两个文件 （如果希望在其它页面中也使用这种效果均可以参照修改）
找到如下代码：
<div id="mainWrapper">
<div id="content" class="content">
在之上加入如下代码
<script type="text/javascript" src="lightbox.js"></script>
最后修改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>';
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;
}
}
修改为如下代码：
// 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;
}
}
========================================
后记：这种效果已经开始在很多个人博客上流行起来，目前唯一的缺点就是，需要在页面完整载入的时候才能点击图片出现这种效果，只要页面上有一些失效的图片地址，造成页面载入迟缓或者停顿就无法出现。只有点击浏览器上的叉叉手动终止页面载入才能恢复。那么为了能持续扮酷，经常性的去清理下失效的图片吧。HOHO。
3、lightbox 效果 与 图片自动缩放 的整合修改
关于自适应图片大小和 lightbox 是可以共存的。首先修改好 自适应图片大小。然后 添加 lightbox 效果只需要更改下class/ubbcode.asp 的修改方法。即不要整段复制我所提供的修改后的代码。而是手动在 ubbcode.asp 中所有图片的链接代码上添加 rel="lightbox" 。
简单的一个例子，没有添加自适应图片大小的图片链接代码
<a href="'+strURL+'" target="_blank">
将其改为
<a href="'+strURL+'" rel="lightbox" target="_blank">
。。添加自适应图片大小效果后，也只要照样修改相应的图片链接代码。其他的修改内容不需要改变！
我在修改好lightbox效果后修正图片大小自适应时的参考代码，在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="如果图片缩小请点击放大！ 生活的理想，就是为了理想的生活！ ∽生活笔谈∽ Http://LifeBlog.Zj.Com " /></a></div>';
lightbox本地下载
首先请将所提供的压缩包内所有图片文件上传到你的空间上，比如：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 两个文件 （如果希望在其它页面中也使用这种效果均可以参照修改）
找到如下代码：
<div id="mainWrapper">
<div id="content" class="content">
在之上加入如下代码
<script type="text/javascript" src="lightbox.js"></script>
最后修改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>';
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;
}
}
修改为如下代码：
复制代码 代码如下:
// 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;
}
}
后记：这种效果已经开始在很多个人博客上流行起来，目前唯一的缺点就是，需要在页面完整载入的时候才能点击图片出现这种效果，只要页面上有一些失效的图片地址，造成页面载入迟缓或者停顿就无法出现。只有点击浏览器上的叉叉手动终止页面载入才能恢复。那么为了能持续扮酷，经常性的去清理下失效的图片吧。HOHO。
3、lightbox 效果 与 图片自动缩放 的整合修改
关于自适应图片大小和 lightbox 是可以共存的。首先修改好 自适应图片大小。然后 添加 lightbox 效果只需要更改下class/ubbcode.asp 的修改方法。即不要整段复制我所提供的修改后的代码。而是手动在 ubbcode.asp 中所有图片的链接代码上添加 rel="lightbox" 。
简单的一个例子，没有添加自适应图片大小的图片链接代码
<a href="'+strURL+'" target="_blank">
将其改为
<a href="'+strURL+'" rel="lightbox" target="_blank">
。。添加自适应图片大小效果后，也只要照样修改相应的图片链接代码。其他的修改内容不需要改变！
我在修改好lightbox效果后修正图片大小自适应时的参考代码，在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="如果图片缩小请点击放大！ 生活的理想，就是为了理想的生活！ ∽生活笔谈∽ Http://LifeBlog.Zj.Com " /></a></div>';
lightbox本地下载