Efecto caption a imágenes en jQuery
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.
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?
Reviewed by Marcos Rivas Rojas
on
miércoles, abril 06, 2011
Rating:
