Poner Información en imágenes con Floatbox

Ahora veremos la forma de poner información adicional en una imagen con el estilo de ventana modal del Floatblox. Primero debemos instalar en nuestra plantilla el script (post anterior )

En la siguiente imagen veremos que hay un info... y al dar click en ese link se abre una ventana con información adicional que nos hará una presentación ó galería de fotos más interesante.

Usamos la misma imagen del posta anterior ya que hace calor y esa limonada no me caería nada mal.

Código

<a href="URL_imagen" rel="floatbox" title="Titulo ó Nombre" rev="info:#imagen01 infoOptions:`width:475 height:250`"><img src="URL_imagenMiniatura" alt="" /></a>

Como se darán cuenta al ver el código hemos agregados dos opciones rev="info:#Nombre (cada imagen debe tener un nombre identificador para poder vincular los textos), también vemos infoOptions:`width:475 height:250` (son para variar el alto y ancho). Para este ejemplo yo le puse a la imagen el nombre de "imagen01".

Ahora debemos poner la información que deseamos mostrar con la imagen, teniendo en cuenta siempre el nombre distinto para cada una. Creamos un DIV y usamos el style="display: none;" (esto oculta lo que este dentro del parámetro en este caso la información), y eso lo repetimos según la cantidad de imágenes ¡solo tener en cuenta el nombre del DIV!.

Este código esta centrado y con los colores del ejemplo, lo pueden modificar a su gusto.

<div id="imagen01" style="display: none;">
<div div style="position: absolute; width: 100%; height: 100%; background-color: rgb(255, 255, 238); color: black;">
<p style="margin: 10px;">
Acá ponemos el texto o información de la imagen.
</p>
</div>
</div>

Pongan estos códigos de información al final de su post, quiten los saltos de linea para quede en una sola linea (ya que así lo entiende blogger).

Esto les servirá tanto para una imagen, galería o slideshow, espero les sirva y recuerden los identificadores de los DIVs.

Veamos esta imagen "Limonadas a 10 ctvs".

Los sueños de crecer... imagínense que así pudieron haber comenzado los dueños de 7up

Las cosas son sencillas, solo tomamos unos limones y los partimos por la mitad, los exprimimos en agua con azúcar, les ponemos mucho hielo ¡y no olvides lo principal!... agradecer a la vida por los limones.

http://poca-tinta.blogspot.com/