Como crear una galeria de imagenes en html

Unas de los elementos que comúnmente 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:

[sourcecode language=’css’]

[/sourcecode]

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>:

[sourcecode language=’html’]

Pie de foto


Pie de foto


Pie de foto

[/sourcecode]

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

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 galería de imágenes,
haz click DONWLOAD.

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

curso html y css

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

28 thoughts on “Como crear una galeria de imagenes en html

  1. ani Reply

    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..

    1. psd a html paso a paso Post author Reply

      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

  2. ani Reply

    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.

    1. psd a html paso a paso Post author Reply

      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.

  3. Lorena Reply

    Gracias Cristian, es lo que estaba buscando, voy a practicarlo a ver si sale,luego te cuento…
    Saludos!!!

  4. Sataniel Reply

    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 😛

  5. Hernandez Reply

    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.

    1. Cristian (PSD a HTML) Post author Reply

      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

  6. oscar Reply

    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.

  7. Niko Reply

    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 😛

    Gracias ! Muchas Gracias!

    1. Cristian (PSD a HTML) Post author Reply

      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

  8. cristina Reply

    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

    1. Jose Rivera Reply

      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

  9. daniel Reply

    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….

    1. Cristian (PSD a HTML) Post author Reply

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

      Saludos!
      Cristian

  10. estebansdr Reply

    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
     

    1. Cristian (PSD a HTML) Post author Reply

      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

    1. Cristian (PSD a HTML) Post author Reply

      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

  11. yazmin o.p. Reply

    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

    1. Cristian (PSD a HTML) Post author Reply

      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

  12. Rosa Reply

    Hola, disculpame estoy haciendo un sitio web y estoy poniendo una galería de fotos. me gustaría que aparezca algo como una cinta donde puedas darles click y las imágenes se amplíen y tengan una breve descripción. Sin embargo no sé como hacerlo… podrías ayudarme?

Deja una respuesta

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

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.