JMiur [E]

Este segundo ejemplo de álbum se basa en CSS Image Gallery de Dynamic Drive. A diferencia del anterior, el DIV sólo contiene vínculos.

Estos vínculos son dos imágenes, la primera, una miniatura y la segunda, oculta, es la imagen de tamaño natural. Al pasar el puntero del ratón sobre el vínculo, se muestra la imagen original en una posición absoluta, predeterminada y, como opción, se agrega un texto descriptivo.

El código CSS es el siguiente:
.galleryVcontenedor {
position: relative;
heigh: 360px; /* altura imagen para evitar desbordamientos */
}

.galleryV {
color: #000000 !important;
text-decoration: none !important;
}

.galleryV img {
border: 1px solid #DDDDDD;
}

.galleryV:hover {
background-color: transparent;
}
.galleryV:hover img{
border:1px solid #FFFFFF;
}

/* propiedades de la imagen de tamaño natural */

.galleryV span {
position: absolute;
visibility: hidden;
padding: 5px;
background-color: #DDDDDD;
}

.galleryV:hover span {
visibility: visible;
left: 110px; /* distancia a la que se mostrará */
top: 90px; /* distancia a la que se mostrará */
z-index: 50;
}
Y este es el código HTML:
<div class="galleryVcontenedor">
<a class="galleryV" href="javascript:void(0);">
<img src="URL_imagen1" width="anchoMiniatura" />
<span>
<img src="URL_imagen1" width="anchoNormal" />
<br />Texto Nº 1
</span>
;</a>
<br />

[... se repite para todas las imágenes ...]

<a class="galleryV" href="javascript:void(0);">
<img src="URL_imagenX" width="anchoMiniatura" />
<span>
<img src="URL_imagenX" width="anchoNormal" />
<br />Texto Nº X
</span>
;</a>
<br />
</div>
En este caso, utilizamos una sola imagen, a la primera, la siempre visible, la forzamos a tener una cierta dimensión, y a la segunda, le damos el tamaño más grande, pero también podríamos utilizar dos diferentes, una pequeña y una grande.



VER:
  • Albumes de imágenes (1)
  • 14 comentarios:

    Unknown  

    Gracias por la segunda entrega. Salud.

    Responder
    JMiur  

    Gracias por el comentario, Toni.

    Responder
    Gem@  

    Me ha recordado un código para ampliar imágenes te dejo en enlace porque sé que te gusta mirar estas cosas ;)

    Responder
    JMiur  

    Ya mismo lo estoy mirando. Gracias :)

    Responder
    Unknown  

    hola como estás.

    tengo una duda...

    como puedo hacer esta misma galeria, pero en orden horizontal?

    mucha sgracias

    Responder
    JMiur  

    Sí, es posible hacerlo. Veré si puedo hacerme tiempo para mostrarlo.

    Responder
    Unknown  

    muchas gracias jmiur. saludos desde Chile

    Responder
    Paula  

    Apliqué este truco en el blog de pruebas y ya está listo para publicarlo. Me pasó algo que para mí fue curioso y pensé en contarlo aquí por si alguien más lo "sufre".
    A partir de tu ejemplo fui cambiando las imágenes por las mías (sólo 4 en total). En ese ir y venir de la solapa de edición HTML a la solapa Redactar para subir las imágenes... ¡desaparecieron las etiquetas <span> y </span>! :O, así que me hizo renegar un rato hasta que descubrí que no estaban en el código fuente. Cuando ya estaba segura de no retocar más la entrada, las escribí donde correspondían... y asunto arreglado.

    Responder
    JMiur  

    Eso puede ocurrir con algunas etiquetas, es algo que hace Blogger, elimina cieras cosas (se ve que no le gustan) :D

    Cuando ponemos códigos personales, lo mejor es no volver nunca al modo Redactar.

    Responder
    Paula  

    Santa verdad... sufrido en carne propia y aprendido ;)

    P/D: volvió mi avatar :D.... pero no el tuyo :o

    Responder
    La hormiguita  

    Lo hice..... buenísimo... gracias... salioó muy bien y era mas fácil de lo que pensaba.
    Eternamente agradecida.:)

    Responder
    JMiur  

    Me alegro que funcionara :)

    Responder
    Anónimo  

    hola!!
    mi galeria esta correcta, aunque tengo un problema, las miniaturas me salen demasiado separadas entre si.
    he intentado cambiarlo pero no encuentro donde, supongo que en css me falta algun atributo o pestaña.
    podriais ayudarme?!
    un saludo

    Responder
    JMiur  

    apnea:
    Como estás colocando la galería en una entrada, deberías eliminar los saltos de línea ya que allí, por defecto, estos son automáticos así que habría que escribir el código en una sola línea.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR