Tutorial: Sencilla galería de fotos con jQuery

En este tutorial, vamos a crear una galería de imagenes de lo mas sencillo, incluso para los mas novatos, con una simple función.

Echadle un ojo al resultado final y vamos al lío…

HTML

<div id="slider">
          <img src="img/img01.jpg" />
          <img src="img/img02.jpg" />
          <img src="img/img03.jpg" />
          <img src="img/img04.jpg" />
          <img src="img/img05.jpg" />
      </div>

Como veis son simplemente unas cuantas imágenes dentro de un contenedor. Ahora necesitamos colocarlas mediante CSS.

CSS

#slider {
    width: 600px;
    height: 350px;
    background: #FFF;
    border: 5px solid #FFF;
    overflow: hidden;
    position: relative;
    margin: auto;
}
#slider img{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

Lo mas importante a la  hora de aplicarle los estilos, es que las imagenes tengan una posición absoluta y el contenedor unas medidas determinadas. Lo que conseguimos con esto, es colocar todas las imágenes apiladas una encima de otra.

Javacript

function slider(){

 if ($('#slider img:visible').length == 0 || $('#slider img:last').is(':visible')){
 $('#slider img').fadeOut().first().fadeIn();
 } else {
 $('#slider img:visible').fadeOut().next('img').fadeIn();
 }

}

$(document).ready(function(){

 slider();
 setInterval(slider, 5000);

 });

Esta parte es muy sencilla, aunque voy a explicar lo que hace exactamente la función slider().

Esta función, está comprobando si ninguna imagen es visible o la última imagen es visible. En estos casos, muestra mediante fadeIn() la primera imagen de la galería.

En caso contrario, es decir, que si haya una imagen visible, simplemente la oculta y muestra la siguiente.

Lo único que tenemos que hacer para ponerlo en marcha, es ejecutar la función cada X milisegundos (5000) con setInterval() y ya está listo.

¿A que era facil?

Links: Descargar archivos | Demo

About these ads