Como crear una galeria de imagenes en html

Unas de los elementos que comunmente contienen las páginas web, son las galeria de imagenes. Hay muchisimas galerías pre-hechas en Flash y Javascript, pero estas requieren que el desarrollador tenga conocimientos de estos lenguajes para poder implementarlas.

En este artículo te mostraré como crear una muy simple galería de fotos en HTML y CSS, con menos de 10 líneas de código.
Esta galeria de imagenes es extremadamente simple pero si buscamos algo sin complicaciones, nos ayudará muchisimo.

Está compuesta por un par de lineas de CSS que las puedes incluir dentro del mismo archivo HTML o las puedes linkear a un CSS externo. Aquí ye mostraré un ejemplo, insertándola en el mismo HTML.

Para esto, y antes del cierre de la etiqueta </head>, incluimos el siguiene código, que define 5 clases CSS:

<style type=&#039;text/css&#039;>
.thumbnail{ position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span{ /* Estilos para la imagen agrandada */ position: absolute; background-color: black; padding: 5px; left: -100px; border: 5px double gray; visibility: hidden; color: #ffffff; text-decoration: none; }
.thumbnail span img{ border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: -100; left: 0px; }
</style>

Y en el codigo HTML solo introducimos las imagenes al tamaño que querramos a modo de miniaturas. En este caso voy a incluir 2 imágenes, obviamente dentro de la etiqueta <body>:

<a href="#thumb"><img src="html5.jpg" width="138" height="100" border="0" /><span><img src="html5.jpg" /><br />
Pie de foto</span></a>
<a href="#thumb"><img src="csscheatsheet.jpg" width="139" height="96" border="0" /><span><img src="csscheatsheet.jpg" /><br />
Pie de foto</span></a>
<a href="#thumb"><span><img src="foto_mazzola.jpg" /><br />
Pie de foto</span></a>

En el código CSS, en la clase “.thumbnail span” puedes modificar el fondo de la imagen agrandada, su borde y sus márgenes.
background-color: -> Color de fondo.
color: -> Color del texto del pie
border:  -> Borde de la foto

** REPORTE GRATUITO:
Cómo convertir un PSD en HTML en 5 pasos.

Haz Click AQUI para Descargarlo AHORA.

Dentro del codigo HTML, cuando se insertan las imágenes, se definen los tamaños. Este corresponde a como veremos las imágenes SIN agrandar.
Y luego de la etiqueta </br> (salto de linea), podemos introducir un texto que irá debajo de la foto grande.

Como puedes ver, el ejemplo de la galeria de imagenes, es totalmente simple y fácil de implementar. Esto nos demuestra una vez más, el poder que nos da el CSS.

Puedes reutilizar este código, solo cámbiale los nombre de las imágenes y los textos del pie de foto (el que dice “Pie de foto”).


Para descargarte el código de esta galeria de imagenes,
haz click DNWOLOAD.

Si tienes alguna duda, postéala aqui.
Saludos!!

curso html y css

Sucribete y recibe los nuevos articulos que publique:

25 pensamientos en “Como crear una galeria de imagenes en html

  1. ani

    hola. comohago para que las imagenes que se amplian solo se muestren en el centro.
    son varias imagenes y no quisiera que una la cubra ala otra,
    puedo editar este codigo en left o en top?
    su respuesta me sera de gran ayuda,gracias..

    Responder
    1. psd a html paso a paso Autor

      Hola Ani
      Exactamente.
      Debemos modificar los valor de las propiedades LEFT y TOP de la clase “.thumbnail:hover span”.
      Left Negativos es hacia la izquierda y positivos hace la derecha.
      Top Negativos es hacia arriba y positivos hace la abajo.

      Saludos!
      Cristian

      Responder
  2. ani

    Gracias por tu respuesta. en una fila tengo 1o fotitos.
    Al poner el cursor se amplia en el lugar que deseo pero el resto ya no.
    Mi idea es que todas las imagenes aparescan en un solo rincón,o en el centro o
    en lado izquierdo. es como cuando usas sexylightbox te aparecen en el centro pero debes hacerle clik a la imagen.
    Espero interpretes mi explicación y gracias por tu ayuda.

    Responder
    1. psd a html paso a paso Autor

      Si Ani te comprendo, pero esta galeria no funciona asi, por eso es tan sencilla y ocupa solo unas pocas lineas de codigo.
      Las imagenes en grande aparecen como overs utilizando la etiqueta de cada imagen pequeña.
      Por lo tanto , aparece encima de ella, con la ubicacion que le des con CSS, pero como referencia a la imagen pequeña.

      Saludos!
      Cristian
      PD: recuerda q sexybox, lightbox y demas, funcionan con Javascript, y eso te permite otras funciones, pero con muchisimas mas lineas de codigo.

      Responder
  3. Sataniel

    Hola man bueno creo que es lo mismo y lo mismo nomas donde esta el link para convertir de PSD a HTML. algun video cuando nos postearas en que año :P

    Responder
  4. Hernandez

    Hola. Mira, tengo una duda. Estoy haciendo una lista de entradas con html con y salen bien, sólo que quiero ponerles un pie de imagen, algo como lo que hace linkwithin para poner el nombre de la entrada. ¿Podrías ayudarme con eso? Muchas gracias.

    Responder
    1. Cristian (PSD a HTML) Autor

      Hola Hernandez
      No comprendo muy bien lo que quieres hacer.
      Si pudieras postear o enviarme algo para ver ya sea grafico o codigo, podria ayudarte.

      Saludos!
      Cristian

      Responder
  5. oscar

    Buenas,
    Necesito ayuda!!! Me han comentado usuarios de Mac que no pueden ver mi web.
    Tengo mi web con ese código y funciona bien en IE, firefox, chrome pero en safari no me aparecen las fotos al pasar el raton por encima y se queda un poco colgado.

    Responder
  6. Niko

    Hola! Me encanto la Idea!

    Ojala me puedas ayudar… (si te ocupa mucho tiempo, por favor no te molestes!)

    Tengo un Blog en blogger, y quisiera que en cada entrada se monte sola una galeria de lo mas simple, que se ponga el tamaño de las fotos en una mida, y al clicar una imagen se ponga el temaño original..

    Es muy cumplicado?

    Mirare si me has dicho algo, haber si me puedes hacer este enorme favor, de mientras voy a navegar por tu blog haber si encuentro lo que busco :P

    Gracias ! Muchas Gracias!

    Responder
    1. Cristian (PSD a HTML) Autor

      Hola Niko
      Mira, lo que primero se me ocurre es buscar alguna utilidad o plugin de Blogger que importe una galeria de Flickr,
      Seria lo mas simple y directo.

      Lamentablemente Blogger no esta tan versatil como WordPress. Alli te aseguro que debe haber algo pre-desarrollado para lo que necesitas.
      O incluso desarrollarlo en PHP.
      Pero Blogger es bastante mas acotado.

      Otra cosa que podrías hacer el Blogger, es modificar el template HTML de la plantilla que estás utilizando.
      Pero eso ya es mas complejo

      Saludos!
      Cristian

      Responder
  7. cristina

    Buenas, yo quería comentar que he seguido todos los pasos a la hora de instertar el código, y habiendo insertado mis imágnees, a la hora de verlo en cualquier navegador, no pasa nada, no se me agrandan las imágenes, ni se me modifica el texto. Cómo lo podría hacer?
    Muchas gracias

    Responder
    1. Jose Rivera

      Eso mismo me sucedio a mi, y creo que lo que estas haciendo mal es que copias el codigo junto a las lineas de explicacion de la lista.Ejm:
      1.-
      2.-Pie de foto

      Lo que debes copiar es solo el codigo sin esos numeros. Te quedaria de esta forma

      Pie de foto

      Espero haberte ayudado.Saludos

      Responder
  8. daniel

    ola aamigo necesito k me ayudes para agregar una galeria a un pagina web… ya intente lo de arriba pero no entiendo que es lo que debo de aser….
    de verdad te agradeceria mucho que me explicaras paso a paso bueno si tienes tiempo si no pues ntp…
    saludoss….

    Responder
    1. Cristian (PSD a HTML) Autor

      Daniel
      Descargate el codigo del DEMO y reemplaza por tus datos.
      Eso deberia funcionar.

      Saludos!
      Cristian

      Responder
  9. estebansdr

    Hola, mira recién me estoy iniciando con el mundo de la programación y paginas web y mi conocimiento es básico. Actualmente estoy usando el mircrosoft frontpage y quiero insertar dentro de una tabla esta galería de imágenes que das como ejemplo, pero no se donde van ubicados los códigos:
    Yo tengo varias celdas y dentro de esta quisiera ubicar la foto, entonces como seria la inserción del código? Muchas Gracias
     

    Responder
    1. Cristian (PSD a HTML) Autor

      Hola Esteban
      Realmente para darte una respuesta segura, deberia ver el codigo.
      Pero lo que si puedo decirte es que intentes no usar FrontPage ni tampoco maquetes con tablas.

      FrontPage genera un codigo bastante sucio y excesivo.
      Y las tablas ya practicamente no se usan. Debes maquetar con DIVs mediante XHTML y estilizando con CSS.
      Asi es como se hace profesionalmente.
      Busca dentro del blog y veras que hay varios articulos sobre DIVs.

      Tambien puedes acceder al Curso Completo de Maquetacion en Video donde explico paso a paso el proceso completo de maquetación con XHTML y CSS desde un diseño en formato grafico.
      No requiere que tengas conocimientos previos ya que explico desde cero el proceso completo de maquetacion con DIVs.

      Puedes acceder al curso en el siguiente enlace:
      http://www.psdahtmlpasoapaso.com/detalles/

      Saludos!
      Cristian

      Responder
    1. Cristian (PSD a HTML) Autor

      Hola Jeff
      Buen pregunta.
      Recuerda que esta galeria es bien simple ya que está hecha solo con HTML y CSS, no hay Javascript.
      El evento “click” se puede controlar con Javascript, por lo tanto, en esta galeria no se puede usar esa funcion.

      Saludos!
      Cristian

      Responder
  10. yazmin o.p.

    Hola!!

    hice una pagina de html es una tarea, y le aghrege varias imagenes, pero al momento de enviarlo pore correo no me aparecen las imagenes, solo en la computadora que cree la pagina. como puedo hacerle para que me aparecan al enviarlo ??? probablemente algo estroy haciendo mal, . solo al iniciar con todo lo pongo y al cerrar >
    y para las imagenes
    me urgeee es que es mi tarea jajaja gracias.
    saludos

    Responder
    1. Cristian (PSD a HTML) Autor

      Yazmin
      Las imagenes de los HTML que se envian por mail, es conveniente ponerlas en un servidor en internet, de lo posible con dominio propio.
      Y entonces en el HTML configuras la ruta completa hacia esas imagenes.

      Espero haberte ayudado.
      Saludos!
      Cristian

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>