Hola
GidHarvey
Este problema es consecuencia de la incompatibilidad de los js prototype y jquery montados en la misma página.
Puedes resolverlo fácilmente sustituyendo lightbox por lytebox, lo que tiene también otras ventajas como la enorme reducción de peso en la carga de los js.
He montado una prueba en tu propio código y funciona perfectamente en coexistencia con el slider jquery, de esta forma:
Código HTML:
Elimino todo esto:
<!--
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
-->
Y, en su lugar coloco esto:
<script type="text/javascript" src="js/lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="css/lytebox.css" media="screen" />
Tienes que ajustar a tu gusto la hoja de estilo y, en particular, esta clase:
.w8 {
margin-left: 4px; /* 8px en el original /*
}
Y este es el cambio en uno de los divs de imágenes:
<div id="boxrandom">
<a href="images/1.jpg" rel="lytebox[random_image]"><img src="images/random_image.jpg" width="72" height="71" border="0" /></a>
<a href="images/2.jpg" rel="lytebox[random_image]"><img src="images/random_image2.jpg" width="72" height="71" border="0" class="w8" /></a>
<a href="images/3.jpg" rel="lytebox[random_image]"><img src="images/random_image3.jpg" width="72" height="71" border="0" class="w8" /></a>
</div> Si tienes alguna dificultad, la comentas para intentar ayudarte.
Bye