Hola a todos,
Soy bastante novata en esto y me he encontrado con un problema a la hora de cargar una imagen usando lightbox de jquery.
Yo tengo un archivo index.html, en el que quiero cargar en un div "contenedor" tres archivos html distintos, pulsando tres botones distintos (sin recargar la página). Para conseguirlo he añadido un script de jquery en el head y en el div de cada botón he colocado el siguiente código:
Código HTML:
<div class="button" onClick="$('#contenido').load('textollamado.html');">TEXTO 1</div>
<div class="button" onClick="$('#contenido').load('textollamado2.html');">TEXTO 2</div>
<div class="button" onClick="$('#contenido').load('textollamado3.html');">TEXTO 3</div> Hasta ahí sin problemas. Los tres archivos se cargan correctamente al pulsar el botón correspondiente.
El problema es que en el primero de los archivos html (textollamado.html), he colocado una imagen para que se abra con lightbox y al cargarse en el index, ignora el script. Si abro ese archivo directamente en el navegador, el lightbox se ejecuta correctamente.
No sé cuál es el problema! Os dejo el cógigo de los dos archivos por si alguien me puede dar una solución. MUCHAS GRACIAS!
EL INDEX:
Código HTML:
<html>
<head>
<title>index</title>
<!-- STYLE -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- SCRIPT -->
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h1>TÍTULO DE LA PÁGINA</h1>
<!--BOTONES -->
<div class="button" onClick="$('#contenido').load('textollamado.html');">TEXTO 1</div>
<div class="button" onClick="$('#contenido').load('textollamado2.html');">TEXTO 2</div>
<div class="button" onClick="$('#contenido').load('textollamado3.html');">TEXTO 3</div>
<!--CONTENIDO -->
<div id="contenido">
CONTENIDO INICIAL
</div>
</body>
</html> EL TEXTO LLAMADO:
Código HTML:
<html>
<head>
<title>textollamado</title>
<!-- STYLE -->
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
<!-- SCRIPT -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!-- PLUGIN -->
<script type="text/javascript">
$(function() {
$('#min a').lightBox();
});
</script>
</head>
<body>
<!--CONTENIDO -->
<div id="min">
<a href="photos/image1.jpg" title="Título de la imagen">
<img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
</a>
</div>
</body>