La mesa de luz no funciona después de página cargada externo con imágenes
Pregunta
He implementado caja de luz-plugin para jQuery de krewenki en un masterpage incluyendo todas las imágenes. Esto fue muy bien trabajando. Hasta que ponga las imágenes en una página externa y cargar esta página imágenes externa en el documento maestro. La mesa de luz ya no funciona. Es esta falta de código jQuery, o se trata de un problema de caja de luz-plugin?
Principal-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>
Solución
No están esperando load()
hasta el final antes de llamar lightbox()
. Es una función asíncrona, por lo que tiene que hacerlo a través de una devolución de llamada:
jQuery(document).ready(function() {
$("#loadimages").live('click', function() {
$('#images').load('images.html', function() {
$(".lightbox").lightbox();
});
}
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow