lightbox 效果 lbs窗口在本地打开_lbs_blog

最近在 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本地下载

时间： 2024-09-20 04:09:07

lightbox 效果 lbs窗口在本地打开_lbs_blog的相关文章

纯CSS制作的网页中的lightbox效果

"Lightbox"是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口.lightbox效果网络上有很多js版本的介绍.不过都下载一个lightbox的js小则几十K,大则上百K.如果你只是需要一个类似Lightbox的效果,这种百分之百纯CSS制造,不含js的办法倒是可以试试. 以下是引用片段:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><ht

C# winform 远程上传服务器excel文件,并本地打开

问题描述 C#Form窗口需要做一个上传附件的功能,远程服务器(IP:109.104.66.55)上有一个文件夹(abc),软件将excel文件(123.xls)都上传到其文件夹里面,SQL储存这个Excel文件的名字,上传完成后,每次客户端通过SQL存储的文件名字来打开远程服务器的EXCEL文件具体上传和本地打开此文件的代码怎么写啊!!!请大家知道哦一下! 解决方案 解决方案二:打开服务器的xls干啥?在说了打开你本地也看不到...解决方案三:你应该用代码读取文件,然后显示在页面表格里,而不是

分享30个最佳 jQuery Lightbox 效果插件

Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果.Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示

怎么通过浏览器，点击按钮直接调用office在本地打开word文档？

问题描述 怎么通过浏览器,点击按钮直接调用office在本地打开word文档? 怎么通过浏览器,点击按钮直接调用office在本地打开word文档.不是在浏览器中打开.不用提示打开或保存,直接打开为word. 解决方案 早期的Office自带浏览器插件,可以达到你的目的,在浏览器中直接查看Word文档.现在已经取消此功能,但借助第三方插件还是可以的.或者你也可以试一下微软官方office web apps server 解决方案二: 浏览器插件.....

java-如何在多个窗口间实现打开新窗口同时关闭原窗口，在线等

问题描述 如何在多个窗口间实现打开新窗口同时关闭原窗口,在线等 三个窗口间,点击第一个窗口的按钮,打开第二个窗口,在第二个窗口间点击按钮,再打开第三个窗口. 方法:一个新窗口,再dispose就窗口. 可只在前两个窗口间有效,从第二个窗口再打开第三个窗口就没有效了.这是怎么回事呢? 窗口1点击代码: btnNewButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent arg0)

XML用CSS控制属性时，在chrome打开有效果，但是在IE打开就没有用

问题描述 XML用CSS控制属性时,在chrome打开有效果,但是在IE打开就没有用 <?xml version=""1.0"" encoding=""UTF-8"" ?><?xml-stylesheet type=""text/css"" href=""config.css""?> 中国美国英国德国 #a1{ font-s

html在本地打开浏览器能识别编码 运行后通过浏览器访问自动识别的编码格式就不对了。。

问题描述 html在本地打开浏览器能识别编码 运行后通过浏览器访问自动识别的编码格式就不对了.. meta http-equiv="Content-Type" content="text/html;charset=UTF-8" 放到eclipse工程里再通过浏览器访问识别的编码格式就不是charset里设定的格式了: jsp就可以通过<%@ page language="java" contentType="text/html;

Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲的是时间轴的实现,说实话,其实就是listview的偷梁换柱,本来我会在写listview这个系列的时候写的,但是最近自己写的一个项目<Only>上用到了,很多群友说也想看看怎么实现的,独乐乐不如众乐乐,所以就提前先来分享,说说listview,这可是一个名角,在android上很受欢迎,也很实用

js-监听map中的marker.InfoWindow信息窗口是否是打开的

问题描述 监听map中的marker.InfoWindow信息窗口是否是打开的 marker.InfoWindow如果没有打开,我想添加事件...详情是这样的,鼠标click点击图标时,信息窗体显示,现在想在信息窗体关闭时,添加其他事件... 解决方案 不知道不知道不知道不知道不知道 解决方案二: 因为涉及到DOM Range 在网上浏览了很多这方面的东西 仍然没有解决 .