Como hacer un slideshow simple

Muchos de nosotros creo que hemos querido saber ¿Como hacer un Slideshow rápido, fácil y sencillo con jquery?. Bueno pues ahora sabremos como hacerlo.

Primero tenemos que descargar, tanto el archivo de la librería de jQuery como el archivo Cycle.jQuery.

Debemos vincularlos con el archivos con el que vamos a trabajar.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

Debemos tener en cuenta que primero es necesario que la librería de jQuery este vinculada primero, ya que el plugin Cycle.jQuery necesita de esa librería.

Abrimos un SCRIPT de tipo texto Javascript, con el que vamos a inicializar una función que hará el Slideshow ala cargar la pagina.

$(document).ready(function() {
$('.slideshow').cycle({fx: 'Escribimos el efecto que queramos'});
});

Con esto estamos diciendo que: al cargar el documento, ejecute la siguiente función. Dicha función hace referencia a cualquier elemento que tenga la clase (por el “.” si fuera id sería “#”) slideshow y le escribimos cycle para convertirlo en un slideshow, con el efecto que nosotros queramos.

Los efectos que existen son:

• blindX
• blindY
• blindZ
• cover
• curtainX
• curtainY
• fade
• fadeZoom
• growX
• growY
• scrollUp
• scrollDown
• scrollLeft
• scrollRight
• scrollHorz
• scrollVert
• shuffle
• slideX
• slideY
• toss
• turnUp
• turnDown
• turnLeft
• turnRight
• uncover
• wipe
• zoom

A mi en lo personal me gusto mucho el turnLeft y el shuffle.

Nos falta una de las cosas mas importantes, las imágenes que se van a mostrar.

En un DIV con la clase que si recuerdan es slideshow. Y dentro del DIV ponemos todas las imágenes que queramos que aparezcan en el Slider.

Por ejemplo:

<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="550" height="300" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="550" height="300" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="550" height="300" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="550" height="300" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="550" height="300" />
</div>

Con esto ya tenemos un bonito Slideshow.