Carrusel de imágenes con JQuery y ThickBox

Quizá este el es carrusel de imágenes más popular hecho con JQuery, aunque en la mayoría de sus versiones las imágenes del carrusel no se abren, sólo se usan como un muestrario de thumbnails.

Pero eso no significa que no se pueda arreglar, pues se puede añadir una ventana modal con ThickBox para poder visualizar las imágenes.

Puedes ver un ejemplo en este blog de pruebas.

Ponerlo en tu blog no requiere muchos pasos pero sí son varios scripts y hojas de estilos que podrían alentar la carga de la página, es por eso que se recomienda que se alojen todos los archivos en tu propio servidor para evitar problemas.

Primero entramos en Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.js' type='text/javascript'/>
<script type='text/javascript'>

jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel();
});

</script>


<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/Tango.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.css' rel='stylesheet' type='text/css'/>

Ahora en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript pegamos este código:

<center><ul id="mycarousel" class="jcarousel-skin-tango">

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

</ul></center>

Cambia la URL de la imagen donde se indica, va dos veces en cada pedazo de código, pues una es la miniatura y otra es la imagen en tamaño grande cuando se abre.

Si quisieras agregar más imágenes sólo pega antes de </ul></center> un pedazo de código como este:

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

Lo que está marcado en verde son los scripts y hojas de estilos que recomiendo que subas a tu hosting.
Descargar archivos