12 de septiembre de 2012

Slider - Galería de imágenes con CSS

Al título le puse "Slider" pero en realidad no es tan así ya que no se trata de algo tan complejo, hasta quizás no tan vistoso, pero lo vi en desinghack y me pareció interesante. Quizás no es para hacer una super mega galería de imágenes, pero a veces tenemos la necesidad de mostrar alguna que otra imágen y no sabemos de qué manera hacerlo, bueno acá les muestro una y se ve de la siguiente manera:











Bien entonces si les gustó, para obtenerla es muy sencillo. Simplemente primero añadimos los estilos primero antes de la etiqueta ]]></b:skin> en nuestra plantilla:


/* Contenedor general del visor */
.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%; /* 100/nºimágenes, 4 en el ejemplo */
margin:1px;
border: 3px solid black;
opacity: 1;
}
/* Estilo imagen principal */
.grande {
width:100%;
position: absolute;
top: 800px; /* Valor mayor que alto contenedor para ocultar todas las imágenes */
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
/* Relleno inicial del espacio para imagen principal */
.muestra {
opacity: .3;
width: 200%;
top: 170px;
}
/* Marcamos con un borde la miniatura seleccionada */
a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}
/* Movemos con transición la imagen seleccionada a la zona visible */
a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}


Fijense que con colores les dejé marcado algunos estilos que pueden modificar a su gusto.

Ahora pegamos el html donde nosotros queremos que se vea la galería, ya sea en una entrada como acabo de hacerlo yo o bien en un gadget HTML/Javascript, eso es depende de sus necesidades.


<div class="contenedorvisor">

<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN1" />
<img class="grande" src="URL_IMAGEN_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN2" />
<img class="grande" src="URL_IMAGEN_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN3" />
<img class="grande" src="URL_IMAGEN_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN4" />
<img class="grande" src="URL_IMAGEN_ORIG4" />
</a>


<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGEN_ORIG1" />
</a>

</div>


Acá les dejo los espacios necesiarios para que pongan cuatro imágenes. En caso de que quieras seguir agregando más, simplemente añaden lo siguiente debajo de cada etiqueta <a href y </a> de cada foto del código html:


<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN5" />
<img class="grande" src="URL_IMAGEN_ORIG5" />
</a>




Bueno, esto fue todo, ojalá les haya servido, saludos!




cómo hago una galería de imágenes para blog blogger, galería de imágenes css, galería de imágenes css para blog, galería de imágenes css para blogger, como hacer una galeria de imagenes con css, galeria de imagenes facil para blogger, galeria de imagenes, trucos para blog, trucos para blogger, slideshow para blog, slideshow para blogger, slider para blog, slide, howto, slider for blogger,

4 comentarios:

  1. Hola. Me ha gustado mucho la galería, de hecho estoy intentando implementarla en mi web. El problema que tengo es que intento que las miniaturas (unas 15) aparezcan en forma de dos columnas a la izquierda de la imagen grande, pero no encuentro la forma de hacerlo (no conocía el HTML hasta hace tres semanas).
    Puedes echarme una mano, please?
    Mil gracias!

    ResponderEliminar
    Respuestas
    1. Hola Cimarrón! Para lo que intentas hacer no te seriviría mejor esta?
      http://hogarblogger.blogspot.com.ar/2012/09/galeria-de-imagenes-con-miniaturas.html#.UXXWbrVLMb0

      Eliminar
    2. Efectivamente, de hecho la vi después de escribirte el comentario. La única diferencia es que mi idea era que mostrara la imagen haciendo "hover".
      Gracias por tu respuesta, saludos!

      Eliminar
    3. Perfecto, de nada :) Saludos amigo!

      Eliminar