Foros del Web » Diseño web » CSS »

Galeria de Imágenes con CSS

Estas en el tema de Galeria de Imágenes con CSS en el foro de CSS en Foros del Web. Hola, estoy tratando de hacer una galería de imágenes para poner en mi web y que ilustre mi trabajo como diseñador gráfico. Ví algunos ejemplos ...
  #1 (permalink)  
Antiguo 04/08/2011, 10:02
Avatar de alex_cervera  
Fecha de Ingreso: diciembre-2007
Mensajes: 4
Antigüedad: 6 años, 10 meses
Puntos: 0
Galeria de Imágenes con CSS

Hola, estoy tratando de hacer una galería de imágenes para poner en mi web y que ilustre mi trabajo como diseñador gráfico.
Ví algunos ejemplos en el sitio [URL="http://www.cssplay.co.uk"]cssplay[/URL] y conseguí algo que se parece mucho a lo que necesito, solamente que no consigo poner comentarios por debajo de las fotos.
Podrían ayudarme a corregir este problema?

Pongo los estilos CSS:
Código:
<style type="text/css">
/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
color:#000;
}
/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album {
	width:320px;
	height:360px;
	background:#eee url(gallery/trabajos.jpg) 0 40px no-repeat;
	border:1px solid #aaa;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}
/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
padding:0; 
margin:320px 0 0 0; 
list-style-type:none; 
position:relative; 
width:320px;
}
/* remove the default image border */
.gallery img {
border:0;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
font-size:11px;
float:left; 
text-decoration:none; 
color:#000; 
background:#fff; 
text-align:center; 
width:26px; 
height:26px; 
line-height:24px; 
border:1px solid #444;
margin:2px;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute; 
top:-320px; 
left:0; 
visibility:hidden; 
border:0;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-280px;
}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
left:0;
border-left:40px solid #eee;
border-right:40px solid #eee;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
background:#444; 
color:#fff;
outline:0;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
visibility:visible;
outline:0;
}
</style>
y el html: hay una referencia a un estilo que se llama "#nogo"... pero no lo veo en el CSS y no se lo que es (igual funciona cuando hago la presentación en la web, pero quiero saber si puedoi sacarlo de ahi porque venía dentro del código del sitio citado mas arriba.

Código HTML:
<body>
<div id="info">

<h2>A simple CSS photo-album</h2>
<h3>31th July 2006</h3>

<div id="album">
<ul class="gallery">
<li><a href="#nogo" tabindex="1">01<img class="landscape" src="gallery/landscape_1.jpg" alt="landscape image 1" title="landscape image 1" /></a></li>
<li><a href="#nogo" tabindex="1">02<img class="landscape" src="gallery/landscape_2.jpg" alt="landscape image 2" title="landscape image 2" /></a></li>
<li><a href="#nogo" tabindex="1">03<img class="portrait" src="gallery/portrait_1.jpg" alt="portrait image 1" title="portrait image 1" /></a></li>
<li><a href="#nogo" tabindex="1">04<img class="portrait" src="gallery/portrait_2.jpg" alt="portrait image 2" title="portrait image 2" /></a></li>

<li><a href="#nogo" tabindex="1">05<img class="landscape" src="gallery/landscape_3.jpg" alt="landscape image 3" title="landscape image 3" /></a></li>
<li><a href="#nogo" tabindex="1">06<img class="portrait" src="gallery/portrait_3.jpg" alt="portrait image 3" title="portrait image 3" /></a></li>
<li><a href="#nogo" tabindex="1">07<img class="landscape" src="gallery/landscape_4.jpg" alt="landscape image 4" title="landscape image 4" /></a></li>
<li><a href="#nogo" tabindex="1">08<img class="landscape" src="gallery/landscape_5.jpg" alt="landscape image 5" title="landscape image 5" /></a></li>
<li><a href="#nogo" tabindex="1">09<img class="portrait" src="gallery/portrait_4.jpg" alt="portrait image 4" title="portrait image 4" /></a></li>
<li><a href="#nogo" tabindex="1">10<img class="portrait" src="gallery/portrait_5.jpg" alt="portrait image 5" title="portrait image 5" /></a></li>
</ul>
</div>


</div>
</body> 
Después si les parece podemos discutir otros ejemplos de galerías de imágenes
aqui pongo el ejemplo exacto de CSS play:
[URL="http://www.cssplay.co.uk/menu/photo_album.html"]http://www.cssplay.co.uk/menu/photo_album.html[/URL]
  #2 (permalink)  
Antiguo 04/08/2011, 17:03
 
Fecha de Ingreso: mayo-2011
Mensajes: 169
Antigüedad: 3 años, 5 meses
Puntos: 6
Respuesta: Galeria de Imágenes con CSS

mirate la que hice aqui assofenua.orgfree.com/hua.htm (seccion maraes)

estoy a ver si la centro que es lo que no me sale pero todo lo demas funciona
perfectamente

solo tienes que hacer de cada foto una pequegna y otra grande es muy facil

miratelo si te sirve de ejemplo
  #3 (permalink)  
Antiguo 05/08/2011, 01:13
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 3 años, 3 meses
Puntos: 5
Respuesta: Galeria de Imágenes con CSS

Lo que hace el codigo es poner las images ocultas con la propiedad visibility:hidden; y luego cuando pinchas las muestra. pero no veo que en ningun sitio se pueda poner el texto.
  #4 (permalink)  
Antiguo 05/08/2011, 01:20
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 3 años, 3 meses
Puntos: 5
Respuesta: Galeria de Imágenes con CSS

¿Para bajarte el codigo tienes que estar registrado? No he encontrado donde bajarle.

Puedes descargarte el tn3, es bastante facil de usar y te crea una galeria curiosa, pero te pone publicidad en la version libre.
  #5 (permalink)  
Antiguo 05/08/2011, 01:27
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 396
Antigüedad: 4 años, 1 mes
Puntos: 63
Respuesta: Galeria de Imágenes con CSS

Tienes que checkear el código fuente para poder copiar el HTML y el CSS de esa galeria.
  #6 (permalink)  
Antiguo 05/08/2011, 02:22
 
Fecha de Ingreso: julio-2011
Mensajes: 56
Antigüedad: 3 años, 3 meses
Puntos: 5
Respuesta: Galeria de Imágenes con CSS

Por lo que he podido observar no admite comentarios, si no quieres enredar mucho con codigo la solucion mas comoda que se me ocurre es que modifiques la fotos con photoshop, gimp etc y le pongas el comentario dentro de la foto

Etiquetas: galeria, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:40.
SEO by vBSEO 3.3.2