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

(0)

相关推荐

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

    最近在 LBS 交流论坛找到一个很 cool 的页面特效.就是Lightbox.用该方法处理过的图片,预览效果很 cool 呀.大家可以点击下面的图试用一下.具体方法在后面首先请将所提供的压缩包内所有图片文件上传到你的空间上,比如:images. 然后修改压缩包内的 lightbox.js 文件,把 38,39 两行的图片地址修改为你刚刚上传至的图片地址,比如:images/close.gif 和images/loading.gif .并把修改后的 lightbox.js 文件上传到你的博客根目

  • vue生成文件本地打开查看效果的实例

    问题描述: npm run build 后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确. 放到跟目录下就正常了. 问题解决: 打开项目所在文件夹里面的 config - index.js 在 build 部分的 assetsPublicPath 里面加一个点即可 assetsPublicPath: '/', 改为 assetsPublicPath: './', 解释: 将绝对路径改为相对路径(解释有点不对,凑合着理解吧) 延伸: 这么做的效果主要影响的是 项目

  • vue本地打开build后生成的dist文件夹index.html问题

    1.问题描述: npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开? 如何才能像访问 npm run dev 的地址那样访问? 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html 改哪里? config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPubl

  • WordPress 照片lightbox效果的运用几点

    如果你的网站上已经使用了lightbox这类效果,或者下面的几点运用经验你也会觉合适(前提是使用JQuery实现). 1. 指定哪些条件下运用Lightbox效果 在网站的js文件中添加如下语句: 复制代码 代码如下: $(function() { $('a[@rel*=lightbox]').lightBox(); $('.gallery a').lightBox(); }); 这样就决定只有在链接中添加"rel=lightbox"后,该链接才会出现lightbox效果:第二行中的'

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

    Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示例 4.LightWindow v2.0 在线示例 5.Colorbox Lightbox Plugin 在线示例 6.FaceBox 在线示

  • 非jQuery实现照片散落桌子上,单击放大的LightBox效果

    效果图如下 Demo地址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html 实现原理很简单,基本的html如下 复制代码 代码如下: <div id="gallery">             <div class="item">                 <a class="kitLightBox" href="

  • js 父窗口控制子窗口的行为-打开,关闭,重定位,回复

    测试的时候,注意当前目录中,有代码中的html文件. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • sina的lightbox效果。

    使用时,只需要在A标签处加上rel="lightbox"即可.e.g: <A href=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg rel=lightbox><IMG src=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpg height="

  • FCKEditor超级链接默认新窗口打开的修改方法

    Fckeditor是一款开源的WEB可视化编辑器,因为该软件小巧.易用.方便受到大家的欢迎,国内很多CMS都采用了FCK编辑器,最近有很多网友向我们反映关于FCK添加的超级链接不能在新窗口中打开,需要另外设置才可以,那么,能不能将链接默认为新窗口呢? 效果如图所示: 打开 fckeditor\editor\dialog\fck_link.html 查找 id="cmbTarget" 的 select 标签, 添加 selected="selected" 属性 复制代

  • mui 打开新窗口的方式总结及注意事项

    一.什么是良好的用户体验(淘宝.易迅) 1.预加载截图方式:点击.切换模版窗口.显示等待框.执行ajax并渲染.显示数据.关闭等待框. 2.head.body分开载入方式:点击.切换窗口显示等待中.执行ajax并渲染页面.将渲染好的页面append到body中. 3.lazyload等方式感觉太贴近网页,就不算在良好用户体验内了. 二.注意事项 1.窗口切换时执行并发任务(ajax请求或渲染页面)会影响体验 2.无从得知webview渲染完毕的时机 3.使用pop-in应该将动画延长到200-3

随机推荐