jQuery灯箱插件lightBox用法及问题详解

2013-1-13 21:30  2/3794  尔今  TAG: jQuery插件   

    jQuery的灯箱插件LightBox是一个很实用的图片浏览小插件,也很简单,典雅,乖巧,无需额外的标记。 用于覆盖当前页面上的图像 “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。

    据我的经验来看,LightBox虽然应用起来比较简单,但对于许多对javascript和jQuery不是非常熟悉的初学者来说,还是会遇到一些问题的,下面我将就LightBox的具体用法和典型问题谈谈我的看法:

    首先,我们要实现LightBox功能,就必需在网页<HEAD>...</HEAD>中加载相关脚本和样式文件,示例如下:

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

    然后再在<BODY>...</BODY>加上如下代码:

    <script type="text/javascript">

$(function() {

// 第一种选择

$('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接

// 第二种选择

$('#gallery a').lightBox(); // 选择id为gallery下的所有链接

// 第三种选择

$('a.lightbox').lightBox(); // 选择所有class为lightbox的链接

// 第四种选择

$('a').lightBox(); // 选择页面中所有的链接

//…………还有更多的选择,哈哈,发挥你的想象力吧

});

</script>

    现在我们就要说LightBox的问题了,正如上面给出的4种选择,我们可以尽力发挥LightBox炫美特效,但它却也一定的局限性,对于图片展示对象的外标签只能是A标识,如果不统一为A标识加上rel标记或单独的ID和CLASS,我们就只能眼睁睁看着网页局部所有链接被LightBox霸占,再也没有可点击的真正超链接。

    如果是要手工为多个网页内容中需要LightBox效果的A标识加上特别标记,那会是一件很恐怖的事情,所以我们就只有事先规划好需要LightBox特效的区域和板块,然后为这些区域和板块加上特定的ID或CLASS,也可以事先将相关A标识做这样的操作。最需要注意的就是要将特效A标识与其它正常A标识区分开来,对于图文混排的内容最好是为目标A标识加rel标记或单独的ID和CLASS。

    另外,如果目标A标识中刚好有形如name123、abcname、name123abc这样有规则的ID名,那么你就可以用到jQuery选择器中的通配符:

    $("a[id^='name']");//id属性以name开始的所有a标签

    $("a[id$='name]");//id属性以name结束的所有a标签

    $("a[id*='name']");//id属性包含name的所有a标签

    这个对于像EMLOG这样的博客程序是非常实用的,ewceo.com正是用通配符方便地解决了LightBox标识选择问题。

    LightBox官网下载     演示

相关内容

相关评论

kurly by 2013-01-18 08:49
我猜应该可以选择所有带有图片子节点的a标签吧。
$('a:has(img)').lightBox();
进一步地,可以限定范围吧。
$('#content a:has(img)').lightBox();
尔今 by 2013-01-18 11:55
@kurly:呵呵,或许你的方法也不错,但我更喜欢用a[id^='ematt'],十分精准

您只需要填写验证码并提交评论即可
  • 近期热门
  • 为您推荐
  • 最新评论

返回顶部