带有图像的外部加载页面后灯箱无法正常工作答案

【问题标题】：Lightbox not working after external loaded page with images带有图像的外部加载页面后灯箱无法正常工作
【发布时间】：2010-01-29 12:06:36
【问题描述】：

我已经在包含所有图像的母版页中为 krewenki 的 jQuery 实现了 lightbox-plugin。这工作正常。直到我将图像放在外部页面中并将这个外部图像页面加载到主文档中。灯箱不再工作。这是 jQuery 代码错误，还是灯箱插件问题？

main-html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox.css" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.lightbox.js" type="text/javascript"></script>
    <!-- http://github.com/krewenki/jquery-lightbox  -->
    <script language="JavaScript">
        jQuery(document).ready(function() {
            $("#loadimages").live('click', function() {
                $('#images').load('images.html');

                $(".lightbox").lightbox(); // THIS DOESN'T WORK???
            }       
        });
    </script>
</head>
<body>
    <div><a href="#" id="loadimages">Load images</a></div>
    <div id="images"></div>
</body>
</html>

images.html

<a href="image1.jpg" class="lightbox" rel="group1" title="image1"><img src="imgage1_thumb.jpg"/></a>
<a href="image2.jpg" class="lightbox" rel="group1" title="image2"><img src="imgage2_thumb.jpg"/></a>
<a href="image3.jpg" class="lightbox" rel="group2" title="image3"><img src="imgage3_thumb.jpg"/></a>
<a href="image4.jpg" class="lightbox" rel="group2" title="image4"><img src="imgage4_thumb.jpg"/></a>

【问题讨论】：

标签： jquery image external lightbox2 loaded

【解决方案1】：

在调用lightbox() 之前，您无需等待load() 完成。它是一个异步函数，所以你必须通过回调来完成：

jQuery(document).ready(function() {
    $("#loadimages").live('click', function() {
        $('#images').load('images.html', function() {
            $(".lightbox").lightbox();
        });
    }       
});

【讨论】：

好的，这部分我还没有找到，回调！这很好，而且效果很好。感谢这堂课！现在我可以修复我的其他错误 :-) 谢谢！