关闭

生动的ajax图片显示效果,LightBox

标签: ajaxcssurlfilterborderheader
5187人阅读 评论(2) 收藏 举报
分类:

转贴自: yaosansi的blog

Lightbox JS 原作者:Lokesh Dhakar -  email

作者现已推出 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';用以控制“关闭”按钮的图片来源。
下载

经典论坛斑斑子乌建议

 * 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效果吧-----
--------------------------------------------------------------------------------------

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


点击下载此文件

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:208987次
    • 积分:3256
    • 等级:
    • 排名:第10469名
    • 原创:88篇
    • 转载:35篇
    • 译文:0篇
    • 评论:243条
    最新评论