Meter etiqueta script dentro de innerHtml

[jufena84]

Buenas tengo el siguiente problema, yo tengo una galeria de imagenes rotativas cuando presiono una imagen ella me cambia la grande de arriba, pero la idea es que cuando unda la imagen de arriba me la muestre con un lightbox, pero el codigo de inicio del lightbox se ejecuta cuando la pagina carga y obtene todas las rel de la etiqueta <a>, entonces al cambiar de imágen no la carga, entonces quiero mandar ese codigo de iniciacion con el cambio de imagen el codigo es algo como esto.

Este es el codigo que inicia el shadowbox

Código HTML:

<script type='text/javascript'>
	Shadowbox.init({
	overlayColor: "#000",
	//overlayOpacity: &quot;0.6&quot;,
	});
	</script> 

Esta es mi galeria

Código HTML:

<div id="gallery">
	<div id="top-photo">
		<!--<h2>Falls In Glacier (Canon D60)</h2>-->
		<p><a href="Fotos2/Galeria/DSC03150.JPG" rel="shadowbox[galeria1]"><img src="Fotos2/Galeria/DSC03150.JPG" alt="" width="695" height="299" style="border:outset #333;" /></a></p>

	</div>
	<div  id="manejador">
<table align="center">
<tr>
<td width="30">
    <a class="prev"><span>&laquo; Previous</span></a>
 </td>
<td width="640">
    <div id="thumbs">
    <ul>
      <li><a onclick="CambiarImagen(document.images[1].src)"><img src="Fotos2/Galeria/DSC03150.JPG" name="1" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[2].src)"><img src="Fotos2/Galeria/DSC03152.JPG" name="2" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[3].src)"><img src="Fotos2/Galeria/DSC03155.JPG" name="3" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[4].src)"><img src="Fotos2/Galeria/DSC03170.JPG" name="4" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[5].src)"><img src="Fotos2/Galeria/DSC03198.JPG" name="5" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[6].src)"><img src="Fotos2/Galeria/DSC03207.JPG" name="6" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[7].src)"><img src="Fotos2/Galeria/DSC03215.JPG" name="7" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[8].src)"><img src="Fotos2/Galeria/DSC03216.JPG" name="8" alt="" width="95" height="84" /></a></li>
      <li><a onclick="CambiarImagen(document.images[9].src)"><img src="Fotos2/Galeria/DSC03434.JPG" name="9" alt="" width="95" height="84" /></a></li>
      </ul>
      </div>
 </td>
 <td width="26">
    <a class="next"><span>Next &raquo;</span></a>
 </td>
 </tr>
 </table>
 
  
</div>
</div> 

Y este el codigo que cambia la imagen

Código HTML:

function CambiarImagen(Foto){
var Foto2=Foto;
	Foto = Foto.split('/');
	//alert("<p><a ><img src='Fotos/Fotos Ave Maria/"+Foto[Foto.length-1]+"' alt='' width='695' height='299' style='border:outset #333;' /></a></p>");
document.getElementById('top-photo').innerHTML="<p><a href='Fotos2/Galeria/"+Foto[Foto.length-1]+"' rel='shadowbox[galeria1]'><img src='Fotos2/Galeria/"+Foto[Foto.length-1]+"' alt='' width='695' height='299' style='border:outset #333;' /></a></p>";

	
}

Como hago para que el init del shadowbox me cargue la imágen nueva,

gracias de antemano

[jufena84]

He podido solucionarlo, el init del shadowbox carga todos los <a rel='shadowbox'>, el mira y todos los links que tengan el rel los carga en cache, por lo tanto si llamo una nueva imágen por ajax o javascript no me saldrá porque se modificará solo el div y el init no funcionará, para eso se debe lanzar de nuevo el init, con la funcion shadowbox.SetUp(), en la documentación de este habla, espero haber sido de buena ayuda!