Efecto caption a imágenes en jQuery

miércoles, abril 06, 2011
COMPARTE EL POST

caption

El efecto ‘caption’ en una imagen es cuando al pasar el cursor sobre una imagen podemos ver un pequeño cuadro de texto con información adicional o cualquie tipo de contenido alterno que sólo se ve cuando pasamos el cursor.

Después del salto vamos a ver como implementar el efecto caption a imágenes en jQuery de forma muy sencilla y rápida.

Descargar plugin Ver demo

Para hacer este tutorial te interese este post: Alojar archivos de Blogger en Google Sites

Estructura HTML

Lo primero como siempre es tener una estructura HTML para poder guiarnos y seguir elaborando nuestra aplicación o plugin, en este caso tenemos que la estructura está formada así:

Lo que tenemos es que tenemos como siempre un arreglo de capas, los nombres por defecto prefiero que se queden así, pero vamos directo a modificar el texto http://buildinternet.com/project/mosaic por cualquier otra dirección que queramos, y dentro de la capa “details” está el texto que queramos que se muestre, así que ese texto también lo pueden modificar al que quieran.

Por último tenemos la imagen, http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg, podemos reemplazar esta URL por cualquier otra donde esté alojada tu imagen y se muestre.

CSS Hojas de estilo

Nuestro siguiente paso es configurar las hojas de estilo para darle a las capas la forma adecuada y que se vea presentable.

Esta es la primera parte del código CSS ya que sólo se especifican algunas propiedades en cuanto a clases de las capas HTML y algunas etiquetas. Como saben, este código va abajo de la etiqueta <head>, sin embargo tenemos que adjuntar un archivo completo de CSS para poder estilizar aún más el plugin, por eso también debajo de <head> insertamos:

Lo único que tenemos que hacer es cambiar la dirección que tiene por la de nosotros, donde estamos alojando nuestro archivo. Ve el link de arriba para saber como hacer esto.

jQuery

Llegamos a la parte interesante de este tutorial, porque es la modificación del código para crear nuestro efecto caption en jQuery, entonces lo que vamos a hacer es para empezar es vincular archivos javascript para poder empezar a trabajar, todo debajo de la etiqueta <head>

Debemos recordar que debemos reemplazar la 2° dirección por las dirección donde tenemos alojado nuestro archivo una vez descargado. Por último también agregamos el siguiente código para manipular cuestiones de efecto, tiempo, etc.

Podemos agregar las siguientes propiedades si quieres personalizar aún más la forma de presentación de tu plugin, por ejemplo:

animation : 'fade',
speed : 150,
opacity : 1,
preload : 1,
anchor_x : 'bottom',
anchor_y : 'left',
hover_x : '0px',
hover_y : '0px'




Y bueno, si todo te ha salido bien, tu plugin debe ya estar configurado correctamente.



¿Qué te pareció el tutorial?¿Dudas o problemas?

¡Síguenos en Twitter!


Deja tu comentario