Lightbox——新颖实用的显示图片效果,JavaScript

Lightbox——新颖实用的显示图片效果

“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 - “关闭” 按钮