生动的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效果吧-----
--------------------------------------------------------------------------------------

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


点击下载此文件

 

如何使用Lightbox效果

步骤 1 - 安装 1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.  2、...
  • chinmo
  • chinmo
  • 2008年03月16日 11:22
  • 1469

实现简单的类似Lightbox效果的弹出对话框

相信LightBox之类的页面弹出窗口,大家在浏览的时候也应该是很常见的,实现起来也不算太困难,CG今天把在上次发布的ETP项目源代码中的JS部分提取出来,方便大家学习和使用。实现原理:利用DIV的浮...
  • yctccg
  • yctccg
  • 2016年08月16日 10:40
  • 167

lightbox的一个ajax效果

  所谓的lightbox,就是比如在看相册时,当点某张相时,然后突出显示该相片的一个很COOL的效果,其实是用到了prototype,scriptaculous,lightbox.js等类库的,...
  • jackyrongvip
  • jackyrongvip
  • 2007年09月27日 15:15
  • 338

Lightbox v2.0控件使用说明

如何使用:步骤 1 - 安装 1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header...
  • softwave
  • softwave
  • 2007年01月04日 10:16
  • 1842

灯箱效果lightbox.js的使用示例

灯箱效果想必大家都很熟悉,平常用的也会比较多。 今天研究了下反响比较好的jquery插件lightbox.js,虽然界面效果不错,但是也有缺点 兼容性:各大浏览器和ie6+ 不足: 1 由于我们使用时...
  • u011500781
  • u011500781
  • 2015年12月08日 15:25
  • 1554

LightBox图片显示特效

新建网页 4body{margin:0; background: top #ad660c; color:#a45500;}table,td,img,form{border: none;margin: ...
  • zxh263
  • zxh263
  • 2006年08月01日 17:01
  • 784

在web客户端实现显示图片原图预览功能 ,采用的是jquery的lightbox_balupton_zh技术

jQuery Lightbox(balupton版)图片展示插件demo body{font-size:84%; color:#333333; line-height:1.4;} p{padding...
  • xiaozukun
  • xiaozukun
  • 2015年01月20日 14:33
  • 763

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

使用lightbox插件实现js点击图片放大并能关闭的效果
  • zhangxiaomin1992
  • zhangxiaomin1992
  • 2015年12月08日 15:25
  • 342

Lightbox弹出层图片放大插件

Lightbox弹出层图片放大插件,支持上一张下一张和显示图片标题的功能。使用非常方便,点击缩略图,就会出现加载动画,加载完毕,即可显示大图,如果设置了上一张下一张,鼠标移动到图片上,就会显示按钮。点...
  • gwl216
  • gwl216
  • 2015年02月10日 15:34
  • 1536

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

到年底了,项目不怎么忙,所以有空特地研究了下KISSY中源码JS灯箱效果,感觉代码比较简单,所以就按照他们的思路依赖于Jquery框架也封装了一个,特地分享给大家,以前经常看到网上很多这样的插件,感觉...
  • binyao02123202
  • binyao02123202
  • 2014年01月28日 15:58
  • 3358
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:生动的ajax图片显示效果,LightBox
举报原因:
原因补充:

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