Inicio > programación, web > CarouFredSel: carrusel de imágenes con jQuery (avanzado)

CarouFredSel: carrusel de imágenes con jQuery (avanzado)

Sábado, 9 de Octubre de 2010

En el anterior artículo pudimos ver cómo crear un carrusel de imágenes con un plugin de jQuery: CarouFredSel. Se trataba de un sencillo pero atractivo carrusel de imágenes. Hoy profundizaremos más en CarouFredSel, puesto que este plugin da más de sí.

Si recordamos el ejemplo de carrusel de imágenes creado en el artículo anterior, sólo pusimos un parámetro de scroll para programar cada cuantos segundos se desplazan las imágenes. Hoy realizaremos un ejemplo más avanzado para conseguir un carrusel más complejo y profesional.

Un ejemplo interesante es un carrusel de imágenes utilizando también lightbox. Para este ejemplo en concreto utilizaremos como lightbox el plugin prettyPhoto y podéis descargarlo desde la web de  no-margin-for-errors.

Lo primero que haremos una vez descargado es realizar la inclusión de la librería javascript de prettyPhoto:

[js]

[/js] A continuación escribiremos el código javascript en el que utilizaremos carouFredSel unido al plugin prettyPhoto: [js]
[/js]

Y el código html quedará de esta manera:
[html]

[/html]

Con todo esto sería suficiente para que funcione correctamente un carrusel de imágenes en el que clickando sobre una imagen se abre un lightbox.

Podemos añadir un poquito de estilo a este carrusel complementando nuestro archivo css con este poco de código:
[css]
.image_carousel {
padding: 15px 0 15px 40px;
}
.image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
.image_carousel a {
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
[/css]

Y con esto finalizo este carrusel de imágenes avanzado. Para que quede más profesional aún, os recomiendo que el tamaño de las fotos que salen en el carrusel sea más pequeño que el tamaño de las fotos que salen en el lightbox.

Recordad que podéis consultar la web de carouFredSel para ver más ejemplos

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, web , , ,

  1. Domingo, 28 de Abril de 2013 a las 01:13 | #1

    Thanks for the auspicious writeup. It in truth was once a
    leisure account it. Glance advanced to far introduced agreeable from you!
    However, how could we be in contact?

  2. Viernes, 3 de Mayo de 2013 a las 07:21 | #2

    You can send me a message by http://www.alexmontes.es/contactame/

  3. Martes, 18 de Junio de 2013 a las 05:38 | #3

    First off I would like to say wonderful blog! I had a quick
    question in which I’d like to ask if you do not mind. I was curious to know how you center yourself and clear your head prior to writing. I have had trouble clearing my thoughts in getting my ideas out there. I truly do enjoy writing however it just seems like the first 10 to 15 minutes are generally wasted just trying to figure out how to begin. Any suggestions or hints? Cheers!

  4. Jueves, 20 de Junio de 2013 a las 08:11 | #4

    Hi!
    Thanks for your comment.
    Firstly, I think about the ideas I want to express in the post. I try to order it in a paper, and then I start writing.
    If the post is too long, I usually separate it in several posts.
    Finally, I read the post some times to change details.
    I hope I’ve helped you!!

  1. Sin trackbacks aún.