将 JQuery Lightbox() 函数与 Datalist 中的 HTML 链接元素链接

Question

我正在 DataList 中实现这个 JQuery Lightbox 插件：

• http://leandrovieira.com/projects/jquery/lightbox/

如果链接在 DataList 之外，我测试了这段代码是否可以工作：

$('a[@rel*=lightbox]').lightBox();

但它似乎没有拾取 DataList 中具有“rel=lightbox”的链接。

所以我四处寻找并尝试从这里吸取一些教训：

• Could not find element inside Datalist by ID with JQuery

想出了这个，但似乎不起作用：

            $('a.imageActivator').live("click", function() {
                jQuery.lightBox();
            });

出了什么问题？

Answer 1

我认为您需要在点击函数中包含return false;。

Answer 2

我尝试了 JQuery Lightbox 和 JQuery Fancybox。

JQuery Lightbox（如上）似乎存在 lightBox() 无法绑定/链接到 Click 事件的问题。

JQuery Fancybox 出现了必须点击两次才能激活图像的问题。而且它也没有显示第二张图像（但再次显示相同的第一张图像）。

所以最后，我违反了规范，改用了 Lightbox2：

• http://www.lokeshdhakar.com/projects/lightbox2/

这个问题是 $ 与全局声明的 JQuery 的 $ 冲突。因此，在进行一些研究后，这是我的建议。

按如下顺序对脚本进行排序：

<script type="text/javascript" src="/scripts/prototype.js"></script>
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/scripts/lightbox.js"></script>

<script type="text/javascript" src="/scripts/jquery-1.4.2.js"></script> 

JQuery 脚本必须有“jQuery.noConflict();”作为第一行。页面上使用的任何 JQuery $ 符号都必须更改为“jQuery”。例如：

    <script type="text/javascript">
        jQuery.noConflict();

        jQuery(function() {
            jQuery('a.activator').live("click", function() {
                jQuery('#enquireOverlay').fadeIn('fast', function() {
                    jQuery('#box').animate({ 'top': '160px' }, 500);
                });
            });

            jQuery('#boxclose').click(function() {
                jQuery('#box').animate({ 'top': '-200px' }, 500, function() {
                    jQuery('#enquireOverlay').fadeOut('fast');
                });
            });
        });
    </script>   

这让我可以使用与 jQuery 脚本共存的 Lightbox。