lightbox---在web页面中添加图片浏览功能
关键字: javascript,lightboxhttp://www.huddletogether.com/projects/lightbox2
首先去上面的页面看一下特效,能够在web页面中实现象acdsee那样的图片浏览的功能,给单调的页面增色不少。
到目前为止,能实现这样的特效,也只有javascript才能做的这么好。
lightbox是一个用javascript写的组件,专门在web页面中实现图片的浏览。
要把他加到自己的web应用中,并不是多么复杂的事情,lightbox已经替我们做了大量的工作,只要拿过来用就可以了。
首先,要把lightbox下载,放到自己的web应用中。和其他要引用的js文件,css文件放在一起就可以。
但是要注意,css和js中包含所需image图片的路径,最好检查一下,改成自己的绝对路径。
接下来要做的是要把lightbox引进来,
<script type="text/javascript" src="/common/script/3rdParty/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="/common/script/3rdParty/lightbox2/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/common/script/3rdParty/lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" href="/common/script/3rdParty/lightbox2/css/lightbox.css" type="text/css" media="screen" />
再接下来要做的就是给图片链接加一个rel属性,比如:
<a href="xxx" rel="lightbox">xxx</a>
对了,就是这么简单。
最需要注意的事项,就是lightbox自己图片的路径,以及引用的lightbox的路径,只要路径对,一般不会出现问题。
我在用的时候,遇到一个问题,我的图片不是用静态html代码写的,动态生成,所以lightbox捕捉不到image list。解决办法就是,在动态加载图片后,调用Lightbox.prototype.updateImageList()方法,这样就没有问题了。
http://www.huddletogether.com/projects/lightbox2页面上就有简单的使用帮助。
发表评论
- 浏览: 6632 次
- 性别:

- 来自: 大连

- 详细资料
搜索本博客
最近加入圈子
最新评论
-
hibernate中不能用left j ...
lz,你这哪是实现left join 的哦,明明是实现join嘛。你先搞清楚le ...
-- by fanguanqun -
Selenium使用入门
收了,接触过一点,估计还没入门,在java写test模拟前台操作执行,蛮有意思并 ...
-- by cicada_IT -
Selenium使用入门
这么好的东西,当然要好好感谢!
-- by rasonyang -
hibernate中不能用left j ...
是不是啊 。。我看网上说的有用left join on这个。。哎 。。晕了 。。
-- by kikizzw






评论排行榜