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迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注