Lightbox-精美实用的显示图片效果

Lightbox-精美实用的显示图片效果

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口，不明白的话点点下面的链接的图片看看^_^http://www.applelife.cn/look.php?page=25

虽然这个效果做起来比较复杂，但是对于只是使用的我们来说非常简单，只需改动几个小小的细节，你的网站也能马上拥有这么漂亮的效果了。

首先去”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效果吧-----