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

Question

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

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

如果链接位于 DataList 之外，我测试了此代码是否可以工作：

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

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

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

• 无法通过 JQuery 通过 ID 在 Datalist 中找到元素

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

            $('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。