1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

为图片添加AJAX特效

本帖由 srsman2006-05-20 发布。版面名称:前端开发

  1. srsman

    srsman Active Member

    注册:
    2005-11-08
    帖子:
    1,920
    赞:
    6
    使用例子见 http://www.vingel.com/tools/lightbox/,点击文中图片即可。

    如何使用:
    第一部分 - 安装
    首先,你需要把如下的代码添加到你的网页<header></header>中间.

    <script type="text/javascript" src="http://www.vingel.com/tools/lightbox/js/prototype.js"></script>
    <script type="text/javascript" src="http://www.vingel.com/tools/lightbox/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="http://www.vingel.com/tools/lightbox/js/lightbox.js"></script>

    把下面这一句也添加到header中去(或者把这个CSS的内容复制到你的CSS中去也可)。

    <link rel="stylesheet" href="http://www.vingel.com/tools/lightbox/css/lightbox.css" type="text/css" media="screen" />

    第二部分 - 使用
    使用时需要在链接上添加一个 rel="lightbox" 的属性,例子如下:

    <a href="images/image-1.jpg" rel="lightbox" title="我的图片">image #1</a>

    可选: 标题(title)上的文字会在图片上显示成字幕的样子。
    如果你想使用做一个相册式的图片集,可以以下方式: 在图片上添加 rel="lightbox[roadtrip],比如:

    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    每个页面中没有限制显示图片的个数。

    如果你有什么不懂之处,或者使用上的疑难,请到这里留言
    http://www.vingel.com/blog/57
     
  2. Hoofei

    Hoofei New Member

    注册:
    2005-12-10
    帖子:
    3,162
    赞:
    35
    lightbox