Lightbox لا يعمل بعد صفحة محملة خارجية مع الصور

https://stackoverflow.com/questions/2159808

23-09-2019
|

سؤال

لقد قمت بتطبيق Lightbox-plugin لـ jQuery of كرينكي في Masterpage بما في ذلك جميع الصور. كان هذا يعمل بشكل جيد. حتى أضع الصور في صفحة خارجية وتحميل صفحة الصور الخارجية هذه في المستند الرئيسي. Lightbox لا يعمل بعد الآن. هل هذا خطأ رمز jQuery ، أم أن هذه مشكلة Lightbox-plugin؟

الرئيسية 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>

صور. 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>

المحلول

أنت لا تنتظر load() لإنهاء قبل الاتصال lightbox(). إنها وظيفة غير متزامنة ، لذلك عليك القيام بذلك من خلال رد الاتصال:

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow