转贴自: yaosansi的blog
Lightbox JS 原作者:Lokesh Dhakar - email
作者现已推出 Lightbox JS v2.0
演示页面:http://www.huddletogether.com/projects/lightbox2/
“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。文字表述显然不够明了,所以请先看一下Lightbox的演示页面。
如何使用?
- Lightbox能非常简单地应用到您的页面上。首先将lightbox.js包含到您页面的header部分:
<script src="lightbox.js" type="text/javascript"></script>
- 将rel="lightbox"属性加入到任何有链接的标记里面用以激活Lightbox功能,例如:
<a title="my caption" href="images/image-1.jpg" rel="lightbox">image #1</a>
- 也许您注意到了上面那个例子中,当“打开”图片时会看到图片下面有一段说明文字。这是由title属性控制的。title属性是一个可选项,也就是说您可以不写,当然最好还是简短的说明一下比较好。
怎样定制?
- 可以使用CSS来对“图片层”进行修饰,在上面的那个示例页面中,我们采用了以下CSS代码:
#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; } #lightbox img{ border: none; } #overlay img{ border: none; }
- 想要产生阴影效果的话,需要准备一张半透明的PNG图片和少许CSS。由于IE对PNG图形的糟糕支持(它不支持PNG透明)我们不得不针对它写更多的代码:
#overlay{ background-image: url(overlay.png); } * html #overlay { background-color: #000; back/ground-color: transparent; background-image: url(blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); }
- lightbox.js有一句var loadingImage = 'loading.gif';它是用来控制图片完全加载之前的那个“Loading...”效果的,你可以使用任何来图片替代它。
- 同样的,var closeButton = 'close.gif';用以控制“关闭”按钮的图片来源。
下载
- lightbox.js - Javascript主文件
- lightbox.css - “图片层”样式文件
- overlay.png - 80% 透明度PNG图片,用以实现阴影效果
- loading.gif - “Loading”图片
- close.gif - “关闭” 按钮
经典论坛斑斑子乌建议将
* html #overlay { background-color: #000; back/ground-color: transparent; background-image: url(blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); }
这段CSS代码单独放在一个CSS文件中,比如forIE.css。然后通过以下代码引用到页面中:
<!--[if IE]> <style type="text/css" media="all"> @import url(/html/css/forIE.css); </style> <![endif]-->
Lightbox Plus比Lightbox多了一个图片缩放的功能:当图片大于窗口时,就会自动缩小显示,浏览者可以通过点击鼠标查看原始大小。
使用方法跟Lightbox一样,详细请看这里:http://serennz.cool.ne.jp/sb/sp/lightbox/(E文)
最后感谢经典论坛的forestgan网友推荐。
演示地址:
http://serennz.cool.ne.jp/sb/sp/lightbox/ |
在applelife中的一些解释
--------------------------------------------------------
Lightbox-精美实用的显示图片效果
“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口,不明白的话点点下面的图片看看^_^
虽然这个效果做起来比较复杂,但是对于只是使用的我们来说非常简单,只需改动几个小小的细节,你的网站也能马上拥有这么漂亮的效果了。
首先去”lightbox_plus“作者的网站下载源文件点击,再改动几个小地方
打开JS文件
将182行的: spin.style.position = 'relative';
改成:spin.style.position = 'absolute';
(PS:使loading图片居中)
将65行的:d.body.offsetWidt;
改成:d.body.offsetWidth;
将418行的下面的图片改成你放图片的位置
loadingimg:'loading.gif',
expandimg:'expand.gif',
shrinkimg:'shrink.gif',
effectimg:'zzoop.gif',
closeimg:'close.gif'
打开CSS文件
将8行和20行的图片改成你放图片的位置
background-image: url(overlay.png);
background-image: url(blank.gif);
接着把它应用到我们的页面上
将lightbox.js包含到您页面的header部分:
<script src="lightbox.js" type="text/javascript"></script>
在要使用lightbox的效果的图片链接上加入:rel="lightbox" class="effectable"
例如:<a rel="lightbox" class="effectable" href="www.applelife.cn" ><img src="www.applelife.cn" alt="" /></a>
(PS:链接的地址要和图片的地址一样)
----好了,就是这么简单,赶快让你页面的图片也加入lightbox效果吧-----
--------------------------------------------------------------------------------------
为了方便起见把文件打包了:
点击下载此文件