Como hacer un elegante Slideshow con "Smooth Gallery"

Es uno de los mas lindos y sencillos de instalar, además tiene la ventaja de que es totalmente personalisable y tiene muchas funcionalidades, se pudee: clickear las imagenes y abrirlas en otra pantalla o abrir una página web, también se pueden dejar que las imagenes pasen por sí solas mostrando una descripsión, todo con efectos de transición muy lindos que le dan un aspecto muy profesional a nuestra página. Aquí pueden ver una demo en acción: http://prueba1005.blogspot.com/ . También lo pueden ver en la plantilla “Massive News” WordPress Theme. En la página de los creadores del script - http://smoothgallery.jondesign.net/ - pueden ver otros ejemplos y descargar las últimas versiones del script. Además funciona en Firefox, Internet Explorer, Opera y Safari.

Pero bueno, manos a la obra!

Primero bajamos el pack de archivos de aquí. Están en un archivo Zip y contiene los scripts y el css necesario. Descargar archivo.

Los arhivos que contiene son 4:

• mootools.v1.11.js
• jd.gallery.js
• jd.gallery.transitions.js
• CSS_slideshow.css

estos archivos debemos subirlos a nuestro servidor, yo en este caso usé el de google pages creator, pero hay que tener en cuenta que a fines de 2008 dejará de funcionar, asi que tenganló en cuenta.
Una vez subidos los archivos generamos un script que lo colocaremos justo arriba de: ]]></b:skin>.

Así nos quedará el script:

<script src='http://ignablog.googlepages.com/mootools.v1.11.js' type='text/javascript'/>
<script src='http://ignablog.googlepages.com/jd.gallery.js' type='text/javascript'/>
<script src='http://ignablog.googlepages.com/jd.gallery.transitions.js' type='text/javascript'/>
<link href='http://ignablog.googlepages.com/CSS_slideshow.css' media='screen' rel='stylesheet' type='text/css'/>

ya tenemos el script en el cuerpo de la página, ahora solo nos falta colocar el slideshow donde queremos que aparezca en nuestra página. Yo en el ejemplo opté por ponerlo arriba de las entradas. Entonces vamos a "Elementos de página" y agregamos el siguiente código:

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
defaultTransition: "fadeslideleft"
});
}
window.onDomReady(startGallery);
</script>
<div id="myGallery">
<div class="imageElement">

<h3>Nombre de la página 1</h3>
<p>Aquí agregamos el texto de la descripción de la imagen 1.</p>
<a class="open" href="http://prueba1005.blogspot.com/" title="Leer más"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGKFKgo7ANYRvAaXvMqYmu-LtM9bKLKf5LqAzkH1FBWsqPmxnyLapTHQxoOudjrKWuHOrKbJBbQXYEdtPMql1OKZVr4PwaqxR89dXrykclNrqlaIbmYZyITlyZaIVtFMTYwuxoIdp5R5M/s400/gcheeta1.jpg" class="full"/>
<img src="test.jpg" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Nombre de la página 2</h3>
<p>Aquí agregamos el texto de la descripción de la imagen 2.</p>
<a class="open" href=""http://prueba1005.blogspot.com/" title="Leer más"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZeeF4JUo3VDuMCwuDgCFdi_TprLLpQ6z6MpLd_6ToMfSkn4jN9IYW9Z7FV2HbukG5bnisYVcrNA2KmLpHlg_amKJqxQgs7IRwU3cod7vzTtTirlm1_cqsll_82C4BPFjOpZOX4pTa0M/s400/gjaguar1.jpg" class="full"/>
<img src="test.jpg" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Nombre de la página 3</h3>
<p>Aquí agregamos el texto de la descripción de la imagen 3.</p>
<a class="open" href=""http://prueba1005.blogspot.com/" title="Leer más"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJzBIaPO6zK-MkIGbcMAqHhCSj4vyDvonO1ZEwUc1He7y1csgLoGOxCne3Prg_FMVB8eXYPd2bk-oPsdfCMJff17qs6Pry_7dMcKbUeldfTFXi_4JTMzCB4A4XnmiXWOIU9ddl_-ztzk/s400/leop3.jpg" class="full"/>
<img src="test.jpg" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Nombre de la página 4</h3>
<p>Aquí agregamos el texto de la descripción de la imagen 4.</p>
<a class="open" href=""http://prueba1005.blogspot.com/" title="Leer más"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5XCs8vn5W3i90katA9Ewkjm-98aqQXIBsAnWWnrjO9euqHKiWnUIWRF60K1JKRMzco6dVle_WdhPQ5uo7C139WC1si-bFw6mFGDuN0IZBQafyL6wxESiATTsmXzmBRTNkiuz953ZGzok/s400/snow7.jpg" class="full"/>
<img src="test.jpg" class="thumbnail"/>

</div></div>

Como vemos el script anterior tiene las direcciones de las páginas que queremos enlazar, la dirección de las imagenes que queremos mostrar, las direcciones de las páginas que queremos mostrar, un descripción y el título de la imagen, todo eso es personalizable y ustedes pueden cambiarlas a gusto.

Ahora guardamos y vamos a la vista previa para ver como quedó el Slideshow, si todo salió bien deberíamos verlo como en la página del ejemplo.
El script es totalmente personalizable, por lo que podremos cabiar la cantidad de imagenes, el tiempo, y obviamente la imagenes y su tamaño como también así los links, la descripción y el título.

Espero que les haya sido útil!!