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!!
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..
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
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.
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.
Gracias por tu respuesta. Por fin lo entendi.
Gracias Cristian, es lo que estaba buscando, voy a practicarlo a ver si sale,luego te cuento…
Saludos!!!
Por nada Lorena.
Saludos!
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 😛
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.
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
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.
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!
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
Gracias por los consejos!! Voy a ver que hago 😉
Gracias de nuevo 🙂
Por nada Niko.
Saludos!
Cristian
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
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
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….
Daniel
Descargate el codigo del DEMO y reemplaza por tus datos.
Eso deberia funcionar.
Saludos!
Cristian
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
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
Saludos!!
como hago para que al darle click a la imagen aparezca en tamaño normal??
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
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
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
man, muchas gracias! me ha servido de muchooooooooo!
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?