Tutorial: Sencilla galería de fotos con jQuery

8 Jul

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

6 comentarios to “Tutorial: Sencilla galería de fotos con jQuery”

  1. mordis7 27 enero 2011 a 14:14 #

    Hola Osiris,
    He seguido tu sencilla galería y la verdad que me ha encantado, simple, sencilla y funcional.
    La cuestión es que deseo implementarla en wordpress, ¿vale? y te preguntaba si me sabrías decir donde meto el archivo de javascript que es lo que más problemas me genera.
    Muchas gracias.

    • ozzysong 27 enero 2011 a 14:55 #

      Lo que suelo hacer yo es incluirlo dentro del tema que estoy usando, por ejemplo, “wp-content\themes\inp\js\miScript.js”.

      Si te ha gustado esta galería, en breve públicaré una nueva versión de este tutorial en la nueva versión del blog, http://www.innominepixel.com.

      Gracias por los ánimos :)

      • mordis7 29 enero 2011 a 19:47 #

        Hola, he probado lo que me dijiste y lo que ocurre es que se carga solo la primera image, las demás no aparecen, ¿a que se debe?.

        Muchas gracias.

    • pumoramyx 1 marzo 2011 a 00:24 #

      Hola

      La galeria se sale me funciona ok, lo unico es que le intenro hacer una modificacion y no me aclaro. no se mucho de js.

      Necesito que dependiendo del enlace que entre el scroll este en una posicion determinada de inicio.

      Ejemplo: link 1 img01, link 2 img02

      Si me puedes ayudar te lo agradeceria.

      Saludos cordiales

Trackbacks/Pingbacks

  1. Bitacoras.com - 8 julio 2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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 Como veis son simplemente unas cuantas i…..

  2. AirisPC » Blog Archive » Tutorial: Sencilla galería de fotos con jQuery « In Nomine Pixel - 8 julio 2010

    […] Fuente: Tutorial: Sencilla galería de fotos con jQuery « In Nomine Pixel […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: