lightbox的使用方法

2023-02-22 03:54:02html-css012

lightbox的使用方法,第1张

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.

使用方法如下：

步骤 1 - 安装

1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 将需要外调这三个 Javascript 文件在的 header.

2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到现行的样式表中).

3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 - 激活

1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

可选择项: 使用 title 属性加上说明.

2、如果有一套想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

3、没有限定每个页面的图片组数量和每个图片组图片的数量。

这个很简单，我告诉你正解

这里面用到的技术：ajax，div层的概念，javascript的第三方特效库

div层的概念：类似于一个容器，能够容纳图片等。用代码来解释就是：“<div>这里存放图片</div>”

略缩图和大图：图像可以用代码来控制显示的大小，所以你能够看到小图和大图

当你点击略缩图示，你最先看到一块白色区域，中间的地方有个加载等待图案，这里面用到了ajax技术，同时用到了div层的概念（稍候解释）。当ajax接收到了图片加载完毕的信息后，会告知浏览器，可以显示图片了。

第二步，图片显示在白色区域中。

为什么有些时候白色区域会变小？

因为这里又用到了第三方的js函数库，他的作用的过渡效果，即div层的移动。所以你会看到白色区域慢慢的向图片边缘靠拢。

问什么你点击不到其他地方？

用技术的角度来解释，就是在你第一次点击小图的时候，他已经自动创建的一个透明的div层在上面，所以你点不到他

这就类似于你在桌子上放一幅画，而在画的上面放上玻璃板，当你用笔去往上写东西的时候，当然不会写到画上面。

我说，大哥，你明白了吗？我解释的不容易啊，给分吧

********************************************

我是搞web开发的，如果用我们的专业术语来给你解释，你能明白吗？你有什么依据来证实你说的是对的？代码的编译原理，程序执行的先后顺序，我能够用我的经验判断出来。如果你想真正弄清楚这是怎么一回事，我希望你看看javascript和html基本语法知识（特别是div的用法，设置他的style的z-index属性和filter属性，然后就是js的基本语法和dom规范），然后再来提问。这样效果会好一些，前提是你愿意在这上面花费一些时间

*********************************************

页面确实有flash控件，但只有一个地方用到了，而图片显示的时候没有用到。共两个文件如下(webroot代表应用根目录)

名称：flash_ad_relay.swf

目录：webroot/comic/flasher/ads_data/

名称：imgad.swf

目录：webroot/comic/flasher/ads_data/

说明：通过观察ads.htm（目录在webroot/comic/flasher/）文件代码，能够判断，flash_ad_relay.swf应该是google提供的一个flash控件，其作用是控制广告程序的加载进度。而imgad.swf则是一个广告（ad）程序，当当网的那个，在页面最下面。

总体来说flash_ad_relay.swf用来控制imgad.swf文件加载的进度并且显示。

入口方法：tianchaoyu.html文件中<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

此行代码用来加载flash广告程序，这应该是遵循了google的命名规范和目录结构。

上面这个是我个人推测的，但只有这一个地方用到flash文件，图片显示完全没有用到。

**********************************************

lightbox.css文件

目录：http://www.songzg1.com/comic/flasher/css/lightbox.css

说明：#outerImageContainer{

position: relative

background-color: #fff

width: 250px

height: 250px

margin: 0 auto

}

上面为lightbox.css代码片断，width: 250pxheight: 250px控制了图片第一次点击的时候初始化大小为250像素*250像素在17寸1024*768分辨率上。加载的过程中用到了loading.gif图片（http://www.songzg1.com/comic/flasher/images/loading.gif），你可能是因为这个原因把它理解成flash吧。这只是一张gif图而已。

当点击图片，图片数据传输完毕之后，能够获得图片的宽高属性，根据这些属性，那个div层（<div><img /></div>）会自动扩大或缩小，以适应新的图片。这就是你看到的过渡效果。

处理放大缩小过渡效果的文件是lightbox.js，而effects.js也有一些坐标变化的处理。

lightbox.js是一个简单实用的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.。这个网站上用的是2.02版本，它是由Lokesh Dhakar人于20060331日创建的，可以通过http://www.huddletogether.com察看相关信息。

最后介绍使用方法，非常easy

**********************************************

先说一下其他两个js框架

prototype.js

它是一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国外有多个基于此类库实现的效果库，也做得很棒。

像前面提到的lightbox.js和后面要说的effects.js是基于prototype.js实现的，他们通常结合使用。

scriptaculous.js和effects.js

这是个动画效果库。

scriptaculous 包含以下几个部分：