Lightbox funktioniert nicht nach außen belasteten Seite mit Bildern
Frage
Ich habe implementiert Leuchtkasten-Plugin für jQuery von krewenki in ein Masterpage einschließlich aller Bilder. Dies funktioniert gut. Bis ich setze die Bilder in einer externen Seite und laden Sie diese externen Bilder Seite im Masterdokument. Lightbox funktioniert nicht mehr. Sind die jQuery-Code Fehler, oder ist dies ein Leuchtkasten-Plugin Problem?
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>
Lösung
Sie warten nicht auf load()
zu beenden, bevor lightbox()
Aufruf. Es ist eine asynchrone Funktion, so dass Sie es durch einen Rückruf zu tun haben:
jQuery(document).ready(function() {
$("#loadimages").live('click', function() {
$('#images').load('images.html', function() {
$(".lightbox").lightbox();
});
}
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow