JMiur [E]

Este es un álbum de imágenes muy simple y se basa en el Simple CSS photo-album de CSSPlay.

Consta de una sector superior donde se mostrarán las imágenes y un sector inferior donde aparece una fila con números que hacen las veces de vínculos. Haciendo click sobre ellos, se muestra una imagen determinada.


Todo el álbum es un DIV que contiene una lista desordenada (OL) de items (LI) y cuyas propiedades son establecidas por unas pocas instrucciones CSS configurables:
.galleryHcontenedor {
width: 480px; /* el ancho total */
height: 400px; /* el alto total */
margin: 0px auto;
background: #EEEEEE url(URL_imagen) no-repeat scroll 0px 0px; /* la imagen por defecto */
border: 1px solid #AAAAAA;
text-align: center;
}

.galleryH {
position: relative;
width: 480px; /* el ancho de las imágenes */
margin: 360px 0px 0px 0px; /* el margen superior es igual al alto de la imagen */
padding: 0;
list-style-type: none;
}

.galleryH img {
border:none;
}

.galleryH li {
float:left;
}

/* estas son las propiedades gráficas de los números inferiores */
.galleryH li a, .gallery li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FFFFFF;
border: 1px solid #444444;
color: #000000 !important;
text-decoration: none !important;
}

.galleryH li a img {
position: absolute;
visibility: hidden; /* las imágenes están ocultas */
left: 0px;
top: -360px; /* la imagen se mostrará arriba */
border: none;
}

.galleryH li a:hover {
background-color: #DDDDDD; /* efecto rollover */
}

.galleryH li a:active img, .galleryH li a:focus img {
visibility: visible; /* mostrar la imagen al hacer click */
}

.galleryH li a:active, .galleryH li a:focus {
background-color: #C2C4D0;
}
Y el código HTML para utilizarlo es este:
<div class="galleryHcontenedor">
<ul class="galleryH">
<li><a href="javascript:void(0);">01<img src="URL_imagen01"></a></li>
<li><a href="javascript:void(0);">02<img src="URL_imagen02"></a></li>
..........
<li><a href="javascript:void(0);">09<img src="URL_imagen09"></a></li>
<li><a href="javascript:void(0);">10<img src="URL_imagen10"></a></li>
</ul>
</div>

37 comentarios:

Toni  

Buen artículo, es muy practico, así que espero con impaciencia la segunda entrega...
Salud JMiur.

Responder
JMiur  

Gracias Toni, las siguientes entregas están en preparación. La lucha para que Blogger acepte ciertas cosas es dura pero soy muy cabezadura, así que terminaré derrotando al monstruo :)

Responder
Toni  

Tendrás que pasarte a Wordpress pero con dominio propio.

Responder
Gem@  

Genial de verdad, estaba impaciente por ver esta entrada :)
Me gustaría saber si es posible el tamaño de las imágenes que añadiste y... una pregunta que a lo mejor es algo tonta pero en el código de CSS está la opción de añadir una imagen de fondo, si aplicamos en varias entradas del blog esta galería resulta que en primer lugar aparecería siempre la misma imagen en todas las entradas ¿Hay otra forma de hacerlo y que cada entrada muestre un fondo diferente?

Gracias por todo lo pondré en práctica :)

Responder
JMiur  

Gem@: en este caso, las imágenes son de 480 pixeles de ancho por 360 pixeles de alto.

Sobre lo segundo, sí, es cierto lo de la primera imagen. Esto puede solucionarse así:

En la clase .galleryHcontenedor { }, eliminamos la URL de la imagen y queda
background: #EEEEEE url() no-repeat scroll 0px 0px;

Luego, cada vez que agregamos el código HTML, la colocamos como fondo del contenedor:
<div class="galleryHcontenedor"
style="background-image:url(URL_primeraimagen);">

Responder
Gem@  

He añadido las imágenes alojadas en Blogger y modificando el tamaño en la entrada en ´´Editar`` con width 480 y height 360
Más o menos me ha quedado bien, digo más o menos porque me queda un espacio del color fondo en la parte de arriba y abajo, lo he arreglado añadiendo el color de fondo igual que el blog, pero aún así me gustaría saber que hice mal.

Responder
JMiur  

Gema@: No sé donde puedo verlo colocado, en tu blog no parece estar pero, por lo que dices, lo primero sería revisar las URLs de las imágenes porque al subirlas a Blogger suelen causar problemas.

Esta es una dirección típica (larguísima):

http://bp3.blogger.com/_hljKDuw-cxQ/
RlPTLjGcR5I/AAAAAAAAAcI/eMtkh_4pfK8
/s320/SHlayout1.png

Fijate en eso resaltado, el último directorio. En este caso dice s320 pero podría ser otro tipo sXXX. Allí está la imagen pero no la original sino una, redimensionada, creada por Blogger al subirla.

La imagen original, SIEMPRE está en el directorio:
s00 y esa es la que debe usarse.

¿Esto te sirve de ayuda? si no es así, déjame una dirección donde pueda verlo o envíame el código por mail.

Responder
Gem@  

Llevas razón estuve probando en un blog de pruebas, voy a ver una vez más ese detalle último y te comento...

Responder
Gem@  

Bueno, ha sido una odisea la verdad, primero con el tamaño de las imágenes, y luego que al visionarlo en diferentes navegadores se distorsionaban las medidas.
Ahora mismo ya he conseguido al menos que se vea en Explorer y Firefox con las mismas medidas, la diferencia es que con Firefox el borde y fondo del contenedor no es visible.

Responder
JMiur  

Prometo mirarlo y buscar el problema. Debe ser un detalle de esos que a simple vista se escapan.

A cabezaduras, este código no nos va ganar :D

Responder
Gem@  

He tomado prestada la imagen que orienta de las medidas espero no te moleste si es así házmelo saber por favor ;)

Responder
JMiur  

Allí está, para que la use quien quiera :)

Responder
Nico  

Muy interesante esto. Vere de agregar un par de botones para ir a las imágenes anterior y siguiente y con eso creo que es lo que preciso ;)

Responder
JMiur  

Claro Nico, podría tener botones de avance y retroceso agregándole algún script. Ya que estás, también podría colocarse una opción para que las imágenes se cambiaran solas, como un slideshow, usando setTimeout o algo por el estilo.

Siguiendo la idea de un comentario tuyo, estaba trabajando en eso cuando Ubuntu me abandonó y ahora está todo a mitad de camino :)

Responder
Pepino  

Hola,

oye una pregunta: ¿cómo haces para que al poner el album te cargue la primera imagen de la lista? Es que no lo consigo, hasta que no pulsas algún botón no me aparece ninguna imagen. Gracias.

Un saludo.

Responder
JMiur  

Tienes razón, pepino, es un detalle que se me escapó y no está explicado.

El truco, consiste en colocar la primer imagen cmo fondo del bloque:

En la clase .galleryHcontenedor, agregar una propiedad background:

background:#color url(URL_imagne:UNI) no-repeat scroll 0px;

Responder
Pepino  

Gracias, no había caído. Ya está perfecto. Enhorabuena por tu blog, te leo todos los dias.

Saludos!!

Responder
Pepino  

Hola de nuevo,

acabo de caer en que si intento poner otro álbum igual la foto que se verá de fondo será la que tenía puesta en el anterior. No sé si me explico. Lo único que se me ha ocurrido hasta ahora es poner una imagen común para todos los álbums. Bueno, si se te ocurre algo coméntamelo.

Un saludo.

Responder
JMiur  

Pepino:

Se me ocurren dos cosas:

1. Crear una clase para cada uno, por ejemplo:
.galleryHcontenedor1, .galleryHcontenedor2 {las propiedades comunes a todos}
.galleryHcontenedor1 {background: ... }
.galleryHcontenedor2 {background: ... }

2. No colocar la propiedad background de la primer imagen en la clase, sino inline, esto es, dentro del div:

%lt;div class="galleryHcontenedor style="background: ........"">

No sé si alguna de estas alternativas te sirve. Usar una para todos tampoco es una mala solución.

Responder
Bonzu Pipinpadaloxicopolis III  

Cuando trado de guardar cualquier imagen me regresa a ladel comienzo, osea si quiero gusrdar la 8 y doy clic derecho me regresa a la 1.

Oye y se podrá combinar con el lightwindow?
Y que al hacer clic en cada numero se muestren una serie de thumbnails que al clicar sobre ellos se habra un lightwindow.

Responder
JMiur  

Claro. Funciona con un evento onclick así que hacer click con el botón derecho o izquierdo, es indistinto.

LightWindow se usa con un enlace así que eso podría hacerse perfectamente.

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur
Necesito publicar unos 1000 thumbnails pero tardaría demaciado en cargarse, se me ocurre dividir esos mil en varios posts pero eso es muy lento a la hora de visualizarlos. Se te ocurre algo para evitar que se carguen todos? Mostrando en bloques de 50 o algo así.

Responder
JMiur  

1000 imágenes, aunque sean epqueñas, son muchísimas para cualquier sistema. Lo razonable es qu estén en páginas separadas.

Responder
Bonzu Pipinpadaloxicopolis III  

Se podrá igualar el sistema de este sitio?

Responder
JMiur  

Sí. Eso que se ve en ese sitio sólo abre las imágenes en una ventana nueva.

Responder
Bonzu Pipinpadaloxicopolis III  

¿Ventana nueva?, pero no veo alguna.

Responder
JMiur  

Obviamente estamos viendo cosas diferentes :D

Dime a qué parte de esa página te refieres.

Responder
Bonzu Pipinpadaloxicopolis III  

En la parte de números con un enlace similar a este javascript:jumptopage(1), se muestran unas 238 imágenes (no al mismo tiempo). Es paginado.

Responder
JMiur  

Aparentemente, usa un script llamado PHP Photo Album script de Dynamic Drive. Si es, como dice el nombre, un PHP, no puedes usarlo en Blogger.

Responder
Conejo  

Muchas gracias por la información, justo esto buscaba y no me sorprende hallar la solución a mi problema es este excelente blog.

Un saludo desde la Madriguera del Conejo ;)

Responder
JMiur  

Saludos, Conejo; gracias por el comentario :)

Responder
el Zambullista  

Hola, JMiur. Hice una galería de estas en una entrada y me quedó muy bien (la galería; a la entrada ya estoy resignado). Te molesto por un detalle pequeño: ¿puede evitarse el desplazamiento de una imagen cuando es seleccionada, de modo que calce justo en la caja, como la imagen por defecto que hace de carátula? Gracias, y saludos.

Responder
JMiur  

Creo que es posible. En tu plantilla, las imágenes de los posts tienen un padding por defecto y habría que eliminar eso agregando la propiedad en la galería:

.galleryH li a img {
...........
padding:0 !important;

}

Responder
el Zambullista  

Quedó como quería. Otra vez, muchísimas gracias, por esto y, en general, por esa mezcla rara de reflexión (algo que tiende a meterlo a uno para adentro) y generosidad (algo que lo saca a uno y lo hace servir a otros).

Responder
JMiur  

Gracias, el Zambullista. Me alegra que funcionara :D

Responder
Texto y Contexto  

He realizado todo como esta explicado pero los linnks de los numeros no funcionan, al dar click sobre ellos no se ven las imágenes

Responder
JMiur  

Tendría que ver tu ejemplo online para responderte.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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