Lightbox ne fonctionne pas après page chargée avec des images externes

StackOverflow https://stackoverflow.com/questions/2159808

Question

J'ai implémenté lightbox-plugin pour jQuery de krewenki dans un masterpage y compris toutes les images. Cela fonctionnait très bien. Jusqu'à ce que je mets les images dans une page externe et de charger cette page des images externes dans le document maître. Lightbox ne fonctionne plus. Est-ce faute de code jQuery, ou est-ce un problème lightbox-plugin?

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>
Était-ce utile?

La solution

Vous n'êtes pas attendu load() pour terminer avant d'appeler lightbox(). Il est une fonction asynchrone, vous devez le faire par un rappel: 

jQuery(document).ready(function() {
    $("#loadimages").live('click', function() {
        $('#images').load('images.html', function() {
            $(".lightbox").lightbox();
        });
    }       
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top