Al reemplazar el contenido de un DIV, no funciona el shadowbox...xq?

[markshock]

Hola amigos..!!

Hacia la leche que no aparecía por estos lares... bueeno.. y como no, siempre que aparezco, es con problemas jajajaja

En esta ocasión tengo un problema que no se por donde pillarlo.

Tengo un div y dentro de este mismo una imagen, con un enlace que lo que hace es abrir esa imagen ampliada usando el SHADOWBOX (otra variante del lightbox).

esto funciona genial.

Ahora bien, tengo un boton, que al hacer click, reemplaza el contenido de dicho DIV por otra imagen, que también tiene incluido un enlace para abrir la ampliación de esta nueva imagen en el SHADOWBOX, pero en este caso, se lo pasa por el forro y no consigo hacerlo funcionar... como si al hacer el innerHTML no entendiera la clase respectiva que hace que se abra la imagen en el SHADOWBOX...

Ejemplo:

Código HTML:

<div id="imagen-principal"><a rel="shadowbox[PROD]" title="Ref: 1234 | nombre producto" href="imagenes/img-ampliada.jpg"><img src="imagenes/img-thumbnail.jpg" width="316" height="316" alt="Ref: 1234 | nombre producto" /></a></div> 

Código del botón que realiza el replace del contenido del DIV "imagen-principal":

Código:

document.getElementById("imagen-principal").innerHTML = '<a rel="shadowbox[PROD]" title="Ref: 12345 | nombre producto2" href="imagenes/img-ampliada2.jpg"><img src="imagenes/img-thumbnail2.jpg" width="316" height="316" alt="Ref: 12345 | nombre producto 2" /></a>';

vamos a ver si me podéis echar una mano cracks! por que no se por donde pillarlo... cuando hago el document.get.....innerTML.. se pasa por el forro el rel="shadowbox" .... no le hace ni caso...! y lo necesito!!

Gracias.

[David]

Es que con sólo poner rel="shadowbox" no es que automáticamente ya funcione. Debes nuevamente lanzar la función (normalmente es init() o algo así) que asigne el comportamiento deseado a los enlaces.

[markshock]

Iniciado por David el Grande

Es que con sólo poner rel="shadowbox" no es que automáticamente ya funcione. Debes nuevamente lanzar la función (normalmente es init() o algo así) que asigne el comportamiento deseado a los enlaces.

Mmmm-... cuando esa página se inicia ya tiene en el init() la inicialización del objeto...

por eso, pense que como tan solo hace un replace del contenido de un div, no hacía falta inicializar nada...

entonces, aunque ejecute un innerHTML para que el objeto actue sobre ese link con el rel="...." he de volver a lanzar la función de inicialización?

[David]

Sí, dependiendo del caso. Ya que el init() es el que asigna las acciones correspondientes al elemento. No sé si la librería que mencionas dispone de otra función para convertir enlaces por separado, de lo contrario, tendrás que volver a lanzar init()

[markshock]

Pues lo voy a probar... muchas gracias... no había caído en ello ;)

[markshock]

Pues no hay manera, ni inicializando de nuevo el objeto...

Este objeto cuando se carga la página se inicializa así...

Código:

$(document).ready(function(){
			
			var options = {
				loadingImage: "<?=BASE_PATH . CONS_WEBIMAGENES;?>loadingAnimation.gif",
				animateFade: true,
				counterType:'skip',
				continuous:true,
				animSequence:'hw'
			};
	
			Shadowbox.init(options);
    });

y justo después de ejecutar el document.getElementBy...innerHTML, llamo a esta función...

Código:

function reloadShadowbox(){
			var options = {
				loadingImage: "..imagenes/loadingAnimation.gif",
				animateFade: true,
				counterType:'skip',
				continuous:true,
				animSequence:'hw'
			};
			
			Shadowbox.init(options);
			alert("ok");
	}

pero nada... sigue sin funcionar al cargar la nueva imagen con el enlace para abrir la imagen ampliada en el shadowbox...

[David]

¿Cuál es la dirección de la librería que mencionas? No la he usado, pero revisando sus métodos puede que encuentre algo.

[markshock]

esta es su web -> http://www.shadowbox-js.com/

[David]

Revisando la documentación, veo que existe el método setup() que te puede sevir.
Algo así:

Código Javascript:

var enlace = document.getElementById("imagen-principal").getElementsByTagName("a")[0];
Shadowbox.setup(enlace, { gallery: "PROD" });
 

Puedes revisar la API para más detalles:
http://www.shadowbox-js.com/api.html