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

转载 2006年05月20日 17:32:00

转贴自: 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效果吧-----
--------------------------------------------------------------------------------------

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


点击下载此文件

 

15个非常漂亮的ajax弹窗效果 针对Lightbox和Modal Dialog

运用Lightbox和Modal Dialog可以很方便地在浏览器中展示内容,而无需重载整个页面,有了Lightbox就不必再使用浏览器弹窗了。Lightbox正愈来愈广泛地应用于媒体、网页、邮件、表...

JS图片灯箱(lightBox)效果基本原理和demo

到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉...

使用lightbox插件实现js点击图片放大并能关闭的效果

使用lightbox插件实现js点击图片放大并能关闭的效果

lightbox图片展示效果

  • 2011年12月16日 14:51
  • 341KB
  • 下载

jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果

一、BxCarousel实现图片滚动切换 BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ...

JavaScript 仿LightBox内容显示效果

  • 2008年12月19日 13:59
  • 3KB
  • 下载

很酷的图片显示插件Lightbox 2

  • 2010年10月17日 20:18
  • 153KB
  • 下载

jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果

一、BxCarousel实现图片滚动切换 BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数...

分享30个最佳 jQuery Lightbox 效果插件

Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。Web开发者们模仿 Lightbox 开发了各种各样的图片...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:生动的ajax图片显示效果,LightBox
举报原因:
原因补充:

(最多只允许输入30个字)