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

作者现已推出 Lightbox JS v2.0

演示页面:http://www.huddletogether.com/projects/lightbox2/

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。文字表述显然不够明了，所以请先看一下Lightbox的演示页面。

如何使用？

1. Lightbox能非常简单地应用到您的页面上。首先将lightbox.js包含到您页面的header部分：

   <script src="lightbox.js" type="text/javascript"></script>

2. 将rel="lightbox"属性加入到任何有链接的标记里面用以激活Lightbox功能，例如：

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

3. 也许您注意到了上面那个例子中，当“打开”图片时会看到图片下面有一段说明文字。这是由title属性控制的。title属性是一个可选项，也就是说您可以不写，当然最好还是简短的说明一下比较好。

怎样定制？

1. 可以使用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; }

2. 想要产生阴影效果的话，需要准备一张半透明的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");
       }

3. lightbox.js有一句var loadingImage = 'loading.gif';它是用来控制图片完全加载之前的那个“Loading...”效果的，你可以使用任何来图片替代它。
4. 同样的，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效果吧-----
--------------------------------------------------------------------------------------

为了方便起见把文件打包了：


点击下载此文件