12 de septiembre de 2012

Galería de imágenes con miniaturas incluidas

Anteriormente vimos una galería de imágenes que ya no me atrevería a llamarle SlideShow, porque esto último es tomado ya como un término moderno y es atribuido a cuestiones más extravagantes que a una galería de imágenes como las que les voy a mostrar., lo bueno era que estaba hecho sólo con CSS.

Tambien vimos un lindo SlideShow hecho con css que incluía una pequeña descripción y tenía la función de ser adaptable a cualquier ventana.

Ahora es el turno de una linda galería de imágenes con un conjunto de miniatura ubicadas al lado de la imágen grande de manera vertical. A continuación pueden ver un ejemplo de lo que les estoy hablando:
























Bueno, si les gustó, les voy a explicar cómo colocar esta galería de imágenes que es muy útil para aquellos que en sus blogs desean mostrar muchas fotos y no saben bien de qué manera hacerlo.

Lo primero es pegar los estilos antes de la etiqueta ]]></b:skin> 


#gallery { display: none; }
#jgal {padding:0;margin:0;list-style: none; width: 160px; }
#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }
#jgal li img { position: absolute; top: 20px; left: 160px; display: none; }
#jgal li.active img { display: block; width:370px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}


Una vez hecho lo anterior procedemos a pegar el script antes de la etiqueta </head>


<script type="text/javascript">
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>


Listo, ahora sólo nos queda pegar el html en una entrada como lo acabo de hacer yo acá o bien en un gadget HTML/Javascript, eso queda a gusto de ustedes, de lo que anden necesitando.

<div style="position:relative;">
<ul id="gallery">
<li><img src="URL_IMAGEN1" alt="" /></li>
<li><img src="URL_IMAGEN2" alt="" /></li>
<li><img src="URL_IMAGEN3" alt="" /></li>
<li><img src="URL_IMAGEN4" alt="" /></li>
<li><img src="URL_IMAGEN5" alt="" /></li>
<li><img src="URL_IMAGEN6" alt="" /></li>
<li><img src="URL_IMAGEN7" alt="" /></li>
<li><img src="URL_IMAGEN8" alt="" /></li>
</ul>
</div>


Listo, ahora sólo reemplacen lo que está en rojo por las URLs de las imágenes que ustedes quieren mostrar :) y listo, ya tienen su nueva galería de imágenes lista! 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,

13 comentarios:

  1. hola soy Noemí....pásate por mi blog porfa y dime si tengo que hacer copia de seguridad primero y si tengo que entrar de nuevo en Edición de HTML para borrar los códigos que me dices...mi fanpage es esta http://www.facebook.com/MeDicenNoe te sirve o quieres mi face personal?
    un abrazo

    ResponderEliminar
  2. hola, pude armar la galeria pero no se ven las imágenes, no se que error estoy cometiendo, gracias http://www.tortas-olivia.com.ar/p/galeria.html

    ResponderEliminar
    Respuestas
    1. Hola Blog, por lo que veo hay un sólo enlace colocado en la galería de imágenes pero dicho enlace no funciona, intenté entrar a esa imágen y me dice que no está disponible. Probá colocar todos los enlaces en cada "URL DE LA IMAGEN" y avisame así le hago otro vistazo,si ?

      Eliminar
    2. Otra cosa, creo que vamos a tener que modificar en los estilos que pegaste antes de ]]> el ancho, es decir, el valor de WIDTH, porque no cuentas con suficiente espacio para utilizar estas medidas.

      Eliminar
    3. Gracias x tu pronta respuesta, soy Maria. Ya coloqué todos los enlaces pero no se ven las imágenes. lo raro es que si cliqueo con el botón derecho sobre el recuadro grande me permite abrir la foto en otra pestaña.

      Eliminar
    4. otra cosa, armé la galería en una página del blog, no en una entrada o gadget, tiene algo que ver?

      Eliminar
    5. Creo que identifiqué tu error. Pusiste los estilos antes de /head puede ser? Los tenés que poner antes de la etiqueta ]]> . Lo que va antes de /head es sólo el script.

      Con respecto a que lo pusiste en una página no es problema, aunque yo recomiendo guardar las páginas para algo de más utilidad ya que esto se puede poner simplemente en una entrada. Comentame si te solucionó el problema eso, por lo que vi, es en lo único que te confundiste.

      Eliminar
  3. Los estilos van antes de b: skin fijate que en el tutorial lo explico y les pongo el código exacto que tienen que buscar para pegar los estilos css :)

    ResponderEliminar
  4. Hola, me gustaría usar una galería de este tipo en alguna entrada de mi blog, pero con las miniaturas debajo de la foto principal (en vez de a un lado). ¿Cómo se puede hacer? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Ella :) Fijate si esto te sirve si es para que te ocupe menos espacio o tenga otro orden: http://hogarblogger.blogspot.com.ar/2012/09/slider-galeria-de-imagenes-con-css.html#.UPMalG-ql9V

      Me decís qué te pareció :) Saludos!

      Eliminar
  5. Hola!! como hago para que las fotos se inicien solas?para que empiecen automaticamente?
    muchas gracias!buen aporte!

    ResponderEliminar
    Respuestas
    1. Hola Anónimo, es una galería de imágenes, deberían clickear la miniatura para poder ver la foto en grande :)

      Eliminar