Sencilla galería de imágenes con miniaturas | Oloblogger Para los que les gusta lucirse con los gráficos, ahí va un sistema con algo de JavaScript y por supuesto CSS, para formar una galería que in...

28 de octubre de 2010

Sencilla galería de imágenes con miniaturas

Para los que les gusta lucirse con los gráficos, ahí va un sistema con algo de JavaScript y por supuesto CSS, para formar una galería que incluye unas miniaturas con las que se podrá acceder a las distintas imágenes de la colección.



Primero de todo, instalamos el estilo. Todo el código que se facilita en esta entrada está redactado para incluirlo todo seguido en un gadget. Tras cada parte, las aclaraciones necesarias para hacer lo mismo pero en las entradas.
<style type="text/css">
#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);}
</style>

El display:none; del primer ID (#gallery) está pensado para evitar que las imágenes se vean completas antes de que se "monte" la galería (mientras se carga el código). En #jgal determinais el ancho del espacio destinado a las miniaturas; 160px en el ejemplo, para que se muestren en filas de a dos, porque hay que contar el ancho de la miniatura (60px) más los márgenes entre ellas. En #jgal li, fijais el tamaño de las miniaturas (60x60px). El left de #jgal li img es para desplazar la imagen grande que se va mostrando y que no se solape con las miniaturas. Hay más propiedades que sólo sirven para el estilo propiamente dicho, como la opacidad y los bordes, que podeis cambiar a vuestro gusto sin problemas.

Para el caso de querer publicar galerías en entradas, lo anterior hay que insertarlo antes de ]]></b:skin> para que esté disponible para todas las ocasiones y no tener que introducirlo manualmente en cada post. Previamente habrá que eliminar la primera y la última línea (etiquetas STYLE).

A continuación iría el script:

<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>

Básicamente, lo que hace es buscar si existe el ID gallery y capturar los distintos elementos de lista que pudieran existir en él. Esos elementos se mostrarán como miniaturas y una función controlará si se hace clic en ellos. En ese caso, al pulsado se le asignará la clase active y será visible en la zona de ampliación.

Al igual que con el estilo, esta parte se puede poner directamente en la plantilla si lo vamos a usar con frecuencia, en cuyo caso, las comillas dobles de la primera línea, tendrán que cambiarse a comillas simples. A diferencia de aquel, este se insertará antes de </head>.

Y para finalizar, la parte HTML. Independientemente de dónde hayamos puesto todo lo anterior, esto se tendrá que teclear justo dónde queremos que se muestre la galería. Si todo lo metimos en un gadget, a continuación. Se trata de una lista normal con id=gallery, metida dentro de un DIV con posición relativa para evitar efectos colaterales de otros posicionamientos pre-existentes.

<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>
</ul>
</div>

En alt podeis poner el texto que querais relativo a cada imagen y asunto terminado.

Más información (en inglés) en David's kitchen.

Actualización: Un nuevo post para construir esto mismo pero con las miniaturas en la parte inferior de la imagen y así poder mostrar con un mayor tamaño la imagen principal.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

153 comentarios :

  1. Exelente me gusto mucho y creo que la pondre en mi blog...
    Gracias

    ResponderEliminar
  2. Ay, que facil parece pero al mismo tiempo......complicado.
    Muchas gracias Oloman.
    Un saludo

    ResponderEliminar
  3. Julio, a mí también me gustó y por eso la puse. Y al contrario de lo que piensa Guildo, es bastante fácil de instalar. Si va en un gadget, sólo se trata de poner los tres trozos de código que aquí se muestran, seguidos y juntos dentro del cuadro correspondiente.

    Juan, por aquí todos somos torpes, o sea, que no creo que podamos hacer comparaciones de igual a igual :D
    La utilidad es para los que usen con frecuencia varias imágenes en un mismo post y no quieran que ocupen mucho sitio dentro de él. Con este sistema sólo ocupan el espacio de una, pero permite que el resto sean vistas fácilmente. Lo mismo vale para mostrar determinada colección de imágenes permanentes en un gadget en cabecera o pie de página. Como contraejemplo, no es práctico para ilustrar una entrada con una o dos imágenes. Es lo que reza el título: una galería de imágenes.

    ResponderEliminar
  4. Hola, Oloman, ésto es casi parecido a lo que estoy buscando, sólo que yo quiero hacer una cabecera animada con el contenido de mi blog, no sé si me entiendas.

    ResponderEliminar
  5. Precioso Oloman, ya estaré jugando :)

    ResponderEliminar
  6. Annaiss, probablemente quieras un slider. No he probado nunca ninguno, pero seguro que si buscas encontrarás varios en otros sitios. Ojo, no es que te quiera echar, es que realmente no he aprendido nunca a hacer uno. Mira, en Pizcos he encontrado estos dos sistemas:
    http://www.pizcos.net/2009/08/slideshow-entradas-automatico.html
    http://www.pizcos.net/2010/07/slideshow-automatico-de-entradas-usando.html
    Espero que alguno te sirva.

    Graciela, jugando fue como lo descubrí yo :)

    ResponderEliminar
  7. Hola Oloman.
    Dando muchas vueltas por ahí, he encontrado este código, que me ha resultado impresionante.
    Aunque igual es debido a mi ignorancia.
    Lo pongo aquí con tu permiso para compartirlo con todos tus lectores.
    Código para instalar un video.

    <center><OBJECT id='mediaPlayer' width='480' height='333' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'codebase=
    'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#
    Version=5,1,52,701'
    standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
    <name='fileName'value='Aquí tu URL del video'>
    <value='true'><PARAM NAME='ShowStatusBar'
    VALUE='1'>
    <value='true'><EMBED type='application/x-mplayer2'
    pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' id='mediaPlayer'
    name='mediaPlayer' displaysize='4' autosize='-1'bgcolor='darkgblue'
    showcontrols='true' showtracker='-1'showdisplay='0' showstatusbar='1'
    videoborder3d='-1' width='480' height='333' src='Aquí tu URL del video'
    autostart='true' designtimesp='5311' loop='true'></EMBED></OBJECT></center>

    Lo he probado en una entrada y va perfectamente, solo hay que poner la url del vídeo.
    Formatos que admite: MPEG o WMV

    Una vez que se pone, en una de las flechas aparece un "siguiente", creo que se podrían poner mas de un video, he trasteado con el, pero no doy con la tecla, a ver si tu nos puedes ilustrar.
    He estado buscando por tu blog cosas de video, para no meter la pata, y me he decidido a ponerlo porque no he localizado nada.
    Un saludo.
    cocodrolo

    ResponderEliminar
  8. Gracias Cocodrolo ¿Tienes algún link de un .mpeg o .wmv para probar?

    ResponderEliminar
  9. Hola Oloman.
    Usa esta, avísame cuando termines para quitarla.

    http://dl.dropbox.com/u/4364254/Oloman.wmv

    Un saludo.
    cocodrolo

    ResponderEliminar
  10. Hola Oloman.
    Entiendo que poniendo los códigos diferentes, siempre que publique una entrada servirá. El código html ¿donde va? ahí me e quedado colgado. Yo lo quiero en la entrada. Donde encuentro (la entrada) en la plantilla?.
    Gracias de antemano

    ResponderEliminar
  11. Cocodrolo, funciona estupendamente, pero lamento comunicarte que en IE no va :( Por tanto, no he seguido investigando lo de las listas y lo del botón "siguiente".
    Creo que se trata del código del plugin para FF, pero como no he tenido nunca la necesidad de tener mi propio reproductor, realmente no tengo ni idea de cómo van estas cosas. Encontré esto, pero necesitas PHP.

    ofo1965 con "entrada" me refiero a un post, a una anotación en el blog. Para probarlo, puedes copiar los tres trozos de código que facilito en un gadget tipo HTML/JavaScript.
    Si lo vas a usar en entradas entonces tendrás que poner los dos primeros en la plantilla, de la manera que se explica debajo de cada uno de ellos y el tercero es el que iría en un post.

    No hay de qué Juan

    ResponderEliminar
  12. Muchas gracias Oloman. Entrada, post, nos referimos a lo mismo. Enseguida lo pruebo.

    ResponderEliminar
  13. No funciona del todo. E eliminado la primera y última linea del estilo. E sustituido las dobles "" de la primera linea del Script("text/javascript">) y el resultado es este:

    http://convoirunning.blogspot.com/2010/11/proves.html

    Gracias de nuevo

    ResponderEliminar
  14. Bueno pues primero esta muy padre la galería y se despliega casi de maravilla en mi blog.
    El pequeño detalle es que no importa que haga el texto y la galería se despliegan dos o tres renglones por debajo del titulo del blog y después de proyectar la galería no puede escribir más (no se ve)… se que por ahí anda el detallito pero entre tanto código y numero de verdad me pierdo si pudieras decirme porque pasa eso te lo agradecería mucho.

    ResponderEliminar
  15. Buen día Oloman! Estoy probando todo, pero mi duda es la siguiente: ¿Cómo hago con las fotos? O sea, ya estoy armando el post.Primero pego en el post el último cuadro y después pongo la url de la foto... la url de una foto de facebook no me sirve, no? Y si quiero subir una foto de mi equipo?
    Aclaro que ya pegué los otros dos recuadros en donde iban, pero en esta parte se me complica. Y sólo pegando el código me aparecen 4 recuadritos chiquitos y sin imagen. Y la imagen grande? Aparece después?
    Ayudaaaaa!!!
    Muchas gracias!

    Roma

    ResponderEliminar
  16. El color de fondo se puede cambiar?

    ResponderEliminar
  17. Buenas de nuevo! Ya pude subir las fotos, usé imageShack y copié el código. Mi problema es q hay una de las miniaturas que aparece más abajo que el resto, y no sé cómo alinearla. Acá te paso el link de mi blog, así ves el problema:
    http://iwantmybagnow.blogspot.com/
    y ya que lo estás viendo, también me gustaría saber cómo dejar más espacio entre cada entrada, porque así como están se ven muy juntas, como pegadas y no queda bien. Ah! y también cómo puedo sacar, o hacer invisible la barra de blogger de arriba.
    Muchas gracias, recién estoy arrancando y todo lo q hice en mi blog fue gracias a tu ayuda!
    Saludos!

    ResponderEliminar
  18. ofo1965 de momento, lo que veo es que falla el estilo, que es la clave del truquillo. He descubierto que te falta una clase por cerrar con una llave:
    .footer-outer .widget h2 {
    color: #eeddbb; }
    #gallery { display: none; }
    ...
    Detrás del código de color del footer-outer. Arréglalo y seguimos viendo cosas si no va.

    David cuando redactas el código dentro de una entrada no debes dejar saltos de línea en el mismo. Aquí lo puse con dichos saltos para que se pudiera ver bien, pero tú debes quitarlos cuando edites la entrada. He visto al menos tres entre el cierre de STYLE y el principio de SCRIPT. Prueba a quitarlos.
    Sobre lo que dices del texto, no entiendo muy bien cual es el problema, porque en tu primera entrada veo que después de la galería tienes un párrafo sin problemas.

    ResponderEliminar
  19. Hola Roma (me hacen gracias estas rimas con vuestros nicks). Tras instalar el estilo y el script en tu plantilla o en un gadget, como comentas, tienes que pegar el último trozo en el post. Una vez allí, sólo tienes que sustituir los distintos URL_IMAGEN que puse como ejemplo por la dirección real de tus imágenes. Desconozco si se pueden enlazar las imágenes de Facebook "en caliente" (hotlink). Si no te va, prueba con otras para ver si el problema es sólo ese.

    Javier, el color de fondo será el que tenga por defecto la entrada. No obstante, puedes cambiarlo para la galería añadiendo al STYLE del primer DIV que forma la lista, una propiedad BACKGROUND, un alto y un ancho. No olvides un padding:
    style="position: relative; background:#000000; width:550px; height:400px; padding:10px;"

    Roma, como voy contestando por orden, ahora veo que solucionaste lo de las imágenes de Facebook. Dejo escrito lo anterior por si le sirve a otros. Lo de la miniatura descolocada se me ocurre que puede ser por dos cosas. Una es la misma que le comenté a David en #21 y es que me parece que dejaste saltos de línea entre los elementos de la lista (LI).
    Si con eso no se arregla, puede ser porque haya algún elemento flotante "incontrolado". Entonces, como segunda tarea si lo anterior no funciona, añade esta linea justo delante de la galería:
    <div style="clear:both;"></div>

    ResponderEliminar
  20. Buen día Oloman! Perdón x mi ignorancia, pero cuáles son los saltos de línea que debo borrar?
    Y probé agregando lo q me dijiste, pero no pasa nada.
    Otra cosa... hay saltos de línea en lo q pegamos en la plantilla también?
    Cómo los reconozco? Cómo me doy cuenta?
    Gracias!

    ResponderEliminar
  21. Buenas de nuevo! Necesito ayuda... Quiero que entre cada post haya más espacio, ya que queda todo junto y no sé como separarlo. También, si mirás cada post, hay como una barra translúcida que atraviesa la foto grande. Cómo la saco?
    Este es mi blog www.iwantmybagnow.blogspot.com
    Gracias!

    ResponderEliminar
  22. Roma, un salto de línea es lo que provocas cuando pulsas ENTER. Por ejemplo cuando terminaste la primera interrogación en tu primera frase de 22 y pasaste a otra línea para seguir escribiendo. Cuando hay código en una ENTRADA y este lleva saltos de línea, a veces lo que se ve también los incluye.

    Por otra parte, en la PLANTILLA, los saltos de línea no tienen importancia. No afectan al resultado.

    De todas formas, tras ver de nuevo tu post New Arrival!!! Miss Bag, sospecho que ya lo has arreglado ;)

    Sobre la línea translúcida, eso es cosa del Nuevo Diseñador Blogger (tu plantilla es de esas) y yo ODIO ese diseñador y sus plantillas, porque no las entiendo. De todas maneras, tiene pinta de que es algo relacionado con las pestañas (TABS) que se pueden generar desde el diseñador.

    Si puedes encontrar esta imagen en tu plantilla
    http://www.blogblog.com/1kt/travel/bg_black_50.png
    ...ella es la culpable. Trata de borrarla. Aparece varias veces.

    ResponderEliminar
  23. Buen día Oloman! Estoy nuevamente con otra nueva consulta. Estuve modificando los posts antiguos, para sacar los slide y poner la galería de imágenes como en la entrada "New arrival" Miss Bag. Cargo todo bien, pero cuando veo el resultado final en la página principal, me sale el título del post, pero no las fotos. Y si entro a ese post, se pueden ver todas. Cómo hago para que también se puedan ver en la página principal? Les tendré que cambiar la fecha? No entiendo que pasa!
    Te recuerdo mi blog www.iwantmybagnow.blogspot.com
    Muchas gracias!

    ResponderEliminar
  24. Hola de nuevo! Les cambié la fecha a los dos primeros posts, y al cambiarlo, el que no se veía ahora se ve,y el que se veía no. Será que no puedo tener mas de un post con este sistema de miniaturas en una página?
    Ojalá se pueda!
    Saludos, Roma

    ResponderEliminar
  25. Hola Oloman. Muchas gracias por tu respuesta. Ya funciona a medias. Falla la definición de las fotos y la posición. Espero respuestas.
    Gracias de nuevo.

    ResponderEliminar
  26. Bueno gracias por ver la entrada, fue un poco complicado pero logre sacarla decentemente, bueno pues me funciono bastante bien la galería ya logre acomodarlo bien pero tengo un poco de curiosidad más, no hay forma de hacer que las imágenes se vean todas reducidas me refiero la imagen completa por cada cuadrito, es que se ven en los cuadritos como todas naranjas o verdes. Jeje de igual forma la galería es genial.

    Y pues bueno solo nunca va de más alguna felicitación por tu blog que llevo poco pasando por aquí y ya e sacado la nube de tags y esta pequeña galería.

    ResponderEliminar
  27. Así es Roma. Se me olvidó mencionarlo y tampoco caí cuando expusiste tu problema.
    Sólo puedes poner una galería por página. Esto es porque todo el script está basado en la búsqueda y sustitución de determinada ID que en este caso es JGAL. Como una segunda galería lleva el mismo ID, pues el intérprete de código se lía.
    Hoy precisamente he visto algo que podría ser una solución, pero tengo que trabajarlo bastante, así que si es mucho inconveniente para tu web, quizás deberías intentar buscar otro tipo de galería. Para cada problema, una solución.

    Ofo1965, primero lo de la definición, que es lo más fácil. Estás usando imágenes de 104px de ancho (s104). Tienes que cambiar ese 104 por un 1600 o por un 00. La explicación a esto está en este enlace, así como en otros anteriores.
    Con respecto a la posición, esta está bien, el problema es que quieres mostrar una imagen más grande que el espacio que tienes disponible en el cuerpo de las entradas. O haces más anchos los posts, o cambias el ancho de la imagen activa para que sea más pequeña. Esta medida son los 370px que puedes encontrar en el código que se facilita en el primer trozo de código.

    No entiendo lo que dices David. No sé qué es eso de los colores naranja y verde. Si lo que quieres es hacer más pequeñas las miniaturas, eso es en #jgal.li. Las del ejemplo de 60x60 y ese sería el dato a cambiar.

    ResponderEliminar
  28. Hola de nuevo Oloman.
    Muchas gracias por tus indicaciones, me has hecho repasar y me ha servido. Ya lo tengo para cuando lo quiera poner en práctica.
    GRACIAS.

    ResponderEliminar
  29. Perdona de nuevo Oloman. Me he puesto manos a la obra y esta claro, no es tan fácil. Si te fijas, la resolución de la foto grande es muy mala. He copiado la url de la imagen y la he insertado en el codigo de la entrada. En la url de la imagen no me aparece la subsección/s116 por ejemplo. Afecta esto a la resolución de la foto grande. Hay posibilidad de añadir un zoom a la foto grande.
    Gracias de nuevo y perdona, pero me a gustado este efecto.

    ResponderEliminar
  30. Eureka Oloman.
    El problema estaba en el alojamiento de la imagen. Desde Picasa, ningún problema. Si que es cierto lo que te comento de la resolución y zoom.Como mejorarla.

    Gracias de nuevo.

    ResponderEliminar
  31. ofo1965 sobre la resolución, ahora está bien, salvo en la última imagen (la torre). Pero en ese caso es porque la original es muy pequeña. Sólo tiene 250px de ancho y cuando la fuerzas para mostrarla a 400px, lógicamente, pierde calidad.

    Y sobre la ampliación, esta última está claro que no la puedes ampliar más porque todavía sería peor. Para el resto o para otro caso, tendrías que añadir algún script para ventanas modales e incorporar a la lista (li) que mediante HTML forma la galería, un enlace para activar dicha ventana modal. Busca 'lightwindow' y verás lo que intento explicar.

    ResponderEliminar
  32. Hola, que tal? es la primera vez que entro en este blog, lo veo muy bueno y ojalá puedas echarme un cable. Este es mi blog: finalesdeagosto.blogspot.com; en él me gustaría usar un sistema parecido a este que dices aquí, para cada entrada. Como ves, es un blog muy fotográfico, con una imagen principal y muchas miniaturas que conducen cada una a una nueva ventana con la imagen en tamaño original. Me gustaría poder conseguir que, al pinchar en cada miniatura, la imagen se viera en la misma página, donde se encuentra la imagen grande principal en tamaño original... podrías darme algún consejo? y algún otro para poder cargar imágenes automáticamente al tamaño deseado? siempre tengo que redimensionarlas una a una en cada post para mostrar las miniaturas... muchas gracias!

    ResponderEliminar
  33. Finales de Agosto, para cargar automáticamente a un tamaño concreto no hay nada que yo conozca, pero para lo otro que quieres, a mi parecer, lo más práctico tal y como lo he visto en tu blog, sería usar algún tipo de ventana modal. Léase Lightwindow, Lytebox o alguno similar.

    ResponderEliminar
  34. Oloman gracias por la galeria,pero hay un problema, la he puesto en el blog de viajes al que puedes acceder al pinchar en mi nombre y que estoy iniciando. Al ser ese tipo d eblog y querer poner muchas imágenes esta herramienta me viene genial, el problema esque en firefox si se ve la galeria pero si accedes desde internet explorer no. ¿Alguna solución?

    Gracias

    ResponderEliminar
  35. Oloman acabo de comprobar que si funciona lo que sucede esque tarda bastante en cargar.

    ¿Es normal que tarde mucho más en internet explorer que en firefox?

    Gracias

    ResponderEliminar
  36. Creo que más bien depende del día... y de tu conexión. En Internet Explorer tarda un poquito más, pero muy pco. Supongo que es porque interpretan el código de manera distinta Turismo-Túnez

    ResponderEliminar
  37. Hola Oloman, buenísima esta galería, la puse en mi blog de pruebas y quedó muy bien, quisiera preguntarte por una modificación: sería posible poner las miniaturas abajo, horizontalmente y la foto grande arriba, para ganar ancho para la foto que se abre? gracias por tu ayuda

    ResponderEliminar
  38. Lo tengo pensado e incluso desarrolado y probado del batitú, pero no he tenido tiempo de publicarlo. A ver si saco un rato.

    ResponderEliminar
  39. Buenísmo... lo espero entonces. chas grá

    ResponderEliminar
  40. Simplemente excelente,.. solo debo decir Bravo!!!

    ResponderEliminar
  41. hola
    ante todo gracias por tu blog y por esta entrada.

    tengo algunos problemillas y preguntas parecidas a las de ofo.

    ¿puedo poner todos los tres códigos en el mismo post? la intención es utilizar este truquillo sólo para una entrada, y no sé si vale la pena entonces meterlo en la plantilla via html/css o si con meterlo en el mismo cuerpo de la entrada ya vale. he hecho alguna prueba, y parece que si metes todo en una entrada, sin quitar nada funciona. Pero aún así no estoy del todo segura de si es correcto hacerlo así.

    tengo la misma pregunta que "del baitú", que es poner las miniaturas en columna en vez de en fila, y dejarlas debajo de la imagen.

    por último, me he dado cuenta de que las miniaturas lo que hace es coger un trozo de la imagen, y lo que me gustaría es que en la miniatura se pudiese ver la foto entera reducida, y no sólo un trozo. (no sé si me explico).

    si tuvieras respuestas, te lo agradecería.

    Saludos

    ResponderEliminar
  42. Leti, hace muy pocos días he publicado un artículo sobre cómo cambiar este código para poner las imágenes de las miniaturas en horizontal.

    Sobre ponerlo todo en una entrada, no hay problema y además es lo conveniente si no lo vas a usar mas que esa vez. Sin embargo, lo de dos o más galerías en la misma entrada no creo que funcione bien porque es posible que el JavaScript se haga un poco de lío. Es cuestión de que pruebes y se ve enseguida.

    Por último, para que las miniaturas se vieran entera, las imágenes originales tendrían que ser cuadradas o al menos todas del mismo tamaño. Además habría que modificar la parte del script. Por eso se muestra sólo una porción de la imagen, para que sirva para cualquier tamaño y proporción.

    ResponderEliminar
  43. oloman, disculpa pero no encuentro donde esta tu post si es que lo has hecho.
    Mi pregunta es, ¿Como hago esta galeria?
    http://btemplates.com/2010/blogger-template-magduo/demo/
    me puedes decir porfavor?
    gracias!!!

    ResponderEliminar
  44. hola Oloman excelente blog del cual he aprendido a realizar unas cosas para blogger, mi pregunta es, puedo utilizar esta sencilla pero magnífica galeria en cada post o entrada de blogger?,desde luego que serán en cada entrada fotos diferentes asi como las entradas, digamos que funcionaria como un book para modelos y cada entrada llevará el nombre de cada modelo con sus fotos.

    ResponderEliminar
  45. Astrid, eso es un menú o galería tipo acordeón. Yo no tengo nada publicado sobre eso, pero si buscas con ese nombre, seguro que encuentras muchos resultados. Sólo ten en cuenta que si ya usas una librería JavaScript tipo Scriptaculous o jQuery, el código conviene que sea compatible con la que ya tengas.
    Por ejemplo, esa en la que te has fijado, está aquí http://www.slidedeck.com y está basada en jQuery.
    Sobre el mismo truco en horizontal, ya incorporo el enlace al final de este post.

    Elite Models Mexico, creo que no tendrás ningún problema si lo usas para entradas. Tendrás que seguir las instrucciones que en letra más pequeña y en cursiva se dan para ese caso.

    ResponderEliminar
  46. Hola oloman, estuve siguiendo tus pasos para poner la galería de imagenes en las entradas, teniendo en cuenta que hay que eliminar las etiquetas style y las comillas, pero el resultado ha sido fatal, esto es lo que ocurre http://sologames21.blogspot.com/2011/04/prueba.html, muchas gracias por la información que aportas e utilizado muchas cosas de tu web para arreglar mi blog, saludos y espero pronta respuesta!!

    ResponderEliminar
  47. Mauro en esta entrada se muestra la galería sin problemas, por lo cual, el sistema funciona bien en ellas. Seguramente te olvidaste de cambiar algunas comillas o algo similar. De cualquier manera, borraste la entrada que me pusiste de ejemplo y así no puedo saber qué es lo que pasa...

    ResponderEliminar
  48. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  49. Oloman... tu blog es mi blog de cabecera... gracias a ti puedo afirmar que me he enganchado a esto como hace siglos al basic... en fin. A lo que voy.
    Tengo claro que con este código solo se puede crear una galería por post. Pero.... si creamos tantos estilos y scripts como galerias queremos poner en un post ¿se podrían poner varias galerias?
    Si no lo he entendido mal lo que diferenciaria uno de otro sería "gallery", por lo tanto si quiero poner tres galerías en un post, podría poner 3 estilos y sus scripts pero llamandolos gallery1 gallery2 y gallery3.... ¿o hay que cambiar más nombres? (jgal, etc)...
    Muchas gracias...

    ResponderEliminar
  50. Exacto Javier. La ID que busca el sript es precisamente GALLERY. Puedes usar otra galería con una ID por ejemplo que sea GALLERY2, pero al mismo tiempo, habría que generar un nuevo script que recogiera esa nueva ID.

    Si te fijas, casi todo el script está construido a partir de la captura de todos los elementos de GALLERY:
    if (document.getElementById('gallery'))
    y por eso no hay forma de aprovechar casi nada para evitar multiplicarlo.

    A mí me parece poco eficiente hacer eso y es por ello que sólo lo recomiendo para hacer una presentación por post. Creo que tiene que haber otros sistemas menos engorrosos de hacer lo que tú quieres, pero como para todo, eres libre de hacer lo que gustes :)

    ResponderEliminar
  51. Gracias Oloman... efectivamente hacer una gallería por cada grupo de fotos es una locura... seguiré buscando a ver si encuentro lo que busco.

    ResponderEliminar
  52. Puedo poner dos o mas galerias? de ser asi se debe repetir el script? o solo agregar otra lista con las nuevas fotos?

    ResponderEliminar
  53. Hola Oloman

    Muchas gracias por este codigo, primero que todo. Me ha gustado mucho y lo puse en mi blog, solo tengo un pequeño problemita, las imagenes en miniatura (en la parte izquierda) estan desalieadas,solo un poco, me gustaria saber como las alieno para que queden exactamente como en tu ejemplo.

    Muchas gracias por tu respuesta y tiempo.

    ResponderEliminar
  54. Ilapso tal y como ya hemos hablado en varios comentarios, una galería por entrada y así no tendras que repetir el script.

    RomanP. no tienes habilitado tu perfil y en consecuencia, no sé cual es tu blog. Por tanto, no puedo ver en que consiste esa desalineación.

    ResponderEliminar
  55. Funciona perfectamente aunque todabia no lo tengo en mi principal pero en el de pruebas anda bien

    ResponderEliminar
  56. como hacer que en cada imagen salga una descripción debajo de la figura¿?

    ResponderEliminar
  57. Con este script no puedes hacer eso Regale Perú, porque lo que hace es manejar imágenes. De hecho, la imagen ampliada es colocada como un background y con el texto no es posible hacer fondos.

    ResponderEliminar
  58. Hola, me pregunto si esta galeria se puede realizar en una página en concreto, quiero decir, cuando vas a editar entradas, tb te sale la opcion de editar páginas, me gustaría poner la galeria en una de esas páginas, concretamente en la pestaña "pictures" de mi blog: http://for-view.blogspot.com/

    Otra duda es si se puede crear esta galería con imágenes propias que no estan online.
    Muchas gracias, es un blog muy útil, gracias

    ResponderEliminar
  59. Pude arreglarlo como te pedía, pero ahora mi duda es si se pueden poner varias lineas de miniaturas, solo me salen dos, y sabes si se pueden hacer distintas galerías en la misma pagina, para distintos álbumes o tengo que poner todas las fotos juntas?
    gracias mil

    ResponderEliminar
  60. Claudia.g.s, por partes:

    - La galería se puede incluir sin problemas en una entrada, en un gadget o en una página, por lo que la respuesta es sí.

    - Imágenes propias e imágenes online son dos cosas distintas. Las imágenes pueden ser tuyas o no, pero siempre, para insertarlas en una web, necesitas que estén alojadas en algún servicio al efecto. En nuestro caso, el propio Blogger las aloja en Picasa, que es el servicio que puedes utilizar para conseguir las direcciones.

    - Para cambiar el formato de las miniaturas y su cantidad, tendrás que tocar la parte CSS para mover también el lugar dónde se muestra la imagen principal y que no se solapen las miniaturas. Eso lo haces con el TOP y el LEFT. En este post se explican algunos ejemplos para que te hagas una idea: http://goo.gl/XD70q

    - Con este script en concreto, no se pueden meter varias galerías en la misma pagina. Está explicado en comentarios anteriores.

    ResponderEliminar
  61. muchas gracias por la informacion, por ahora me encanta como queda ya añadire mas fotos e intentare poner mas miniaturas, las imagenes finalmente las enlace desde facebook.

    Muchas gracias por todo

    ResponderEliminar
  62. Cuando inserto los códigos en la plantilla, me aparece este aviso en rojo:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:skin" must be terminated by the matching end-tag "".

    http://elblogdeldolape.blogspot.com/

    ResponderEliminar
  63. Pela ¿qué parte de las tres que se dan aquí? te da ese error. Entiendo que estás intentando meterlo en la plantilla y no en un gadget. Si es así, tienes que hacer las modificaciones que se indican para este caso (letra más pequeña y en cursiva bajo cada trozo).

    Si es el primer trozo, por ejemplo, hay que ponerlo antes del cierre del SKIN, pero quitando las dos líneas con las etiquetas STYLE, la de la apertura y la del cierre.

    ResponderEliminar
  64. Hola OLO, felicidades por tu blog, como siemprexpectacular. el motivo de agregarte un comentario es que ya encontré la manera de hacer que las miniaturas salgan debajo y la imagen encima, si te interesa contéstame y lo comentamos, si quieres ver un ejemplo puedes acceder aquí:
    http://www.marcoabella.com/2011/06/la-tierra.html

    un saludo

    ResponderEliminar
  65. Si me interesa Jordi, pero es que ya encontré también la manera de hacerlo: Sencilla galería de imágenes en horizontal. Supongo que el mecanismo es el mismo, aunque ya vi que tú pusiste las miniaturas abajo e hiciste flotar el conjunto para que se quedara integrado con el texto.

    Gracias de todas formas y no dudes en comentar aquello que te parezca interesante :)

    ResponderEliminar
  66. Hola, gracias por los aportes, si que fue un tanto difícil para mi que estoy retomando este tema,pero lo logré

    ResponderEliminar
  67. Es cuestión de practicar y perseverar Florexita

    ResponderEliminar
  68. Hola oloman, esta increible esta galeria de imagenes,pero he tenido problemas con el mio, pues lo puse en mi blog que estoy hasiendo y me falla, no es igual que como en los ejemplos, al seleccionar la imagen la imagen grande se mueve fuera desu lugar.
    este es mi blog: http://aztlan-ejemplo.blogspot.com/
    talvez sea por que lo coloque en un gadget HTML/javascript
    espero y me ayudes

    ResponderEliminar
    Respuestas
    1. Precisamente el código tal cual está aquí es para un gadget, así que probablemente eso no sea. Más bien pienso que alguno de las múltiples pruebas que tienes interfieren con esta. Podría ser que tuvieran alguna clase en común o peor aún, alguna id.

      En primer lugar elimina el gadget y copia y pega de nuevo (solución universal). Si sigue igual prueba a bajarlo de esa zona, que ese bloque tiene un título que no me gusta nada (overflow). Por ejemplo debajo del cuerpo de las (inexistentes) entradas. Como última prueba si sigue igual, inténtalo en otro blog de prueba si tienes.

      Aparentemente está todo bien, por lo que no encuentro otra explicación que la de la interferencia o la del contenedor dónde está ahora.

      Eliminar
  69. Hola oloman, segui tus consejos de eliminar el gadget y seguia igual, despues elimine todos los gadget y coloque este gadget de las imagenes y me funciono muy bien, pero fui poniendo cada uno de los gadget que tenia anteriomente y fallo enuevo a,lparecer fue un codigo que permitia poder colocar cualquier menu para blogger
    era este el que afectaba:

    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}

    y lo cambie por este:

    #crosscol ul {z-index: 200; padding:0 !important;}
    #crosscol li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}

    y alparecer ya no afecto al gadget
    el blog:
    http://aztlan-ejemplo.blogspot.com/

    gracias por contestar ami alluda
    saludos

    ResponderEliminar
  70. Hola Oloman,

    He intentado poner esta galería en un blog de pruebas, pero no consigo que se vea bien. La imagen en grande sale totalmente descolocada... No sé como puedo hacer que la foto grande se vea en su sitio, dentro de la entrada. Agradezco tu ayuda, te dejo el link para que lo veas:

    http://unadudapruebas.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Si pusieras más miniaturas la cosa se solucionaba, porque el problema es que el alto de la galería lo marca el alto que suman las miniaturas y tu imagen es cuadrada (más alta). Sin embargo, si quieres forzar el alto, entonces tienes que añadir a #jgal un height. Por ejemplo, tal como está ahora, un height:300px; arregla el desbarajuste.

      Eliminar
    2. ¡Mil gracias! Problema resuelto.
      Me surge una nueva duda, ¿hay algún modo de incluir texto bajo cada una de las imágenes que pertenecen a la galería?. Me gustaría poner la técnica, año, soporte,... de cada fotografía para utilizar la galería a modo portfolio. Lo único que se me ocurre es incluirlo directamente en la imagen, pero el texto entonces no podría seleccionarse...
      Gracias de nuevo.

      Eliminar
    3. Pienso que seguramente no, si no cambiamos el código, pero puedes hacer una prueba:

      <li><img src="URL_IMAGEN1" alt="" />TEXTO</li>

      Y una segunda opción que es más posible que funcione:

      <li><img src="URL_IMAGEN1" alt="TEXTO" /></li>

      Eliminar
    4. No sale así, al menos como necesito que aparezca... seguiré investigando a ver cómo puede solucionarse. ¡Gracias!

      Eliminar
    5. Probando y probando he conseguido avanzar un poco. Ya aparece el texto más o menos donde lo quería añadiendo lo siguiente:

      #jgal li.active span {display:none; position:absolute; left:567px; top:0px; width:200px;font-family:arial; color:#666666; font-size:11px; line-height:15px; text-align:justify;}
      #jgal li.active span {display:block; top: 0px; }

      Ahora el problema es que cuando pinchas en otra imagen distinta, el texto sigue apareciendo, pero esta vez dentro de la miniatura. No sé si puedes echarle un vistazo al blog (http://unadudapruebas.blogspot.com/) y ver si me puedes echar una mano para que no se vea el texto cuando no esté activa la miniatura. Grazie.

      Eliminar
    6. Bueno parece que ya he llegado a la solución definitiva. He cambiado alguna cosa más y ya se ve perfecto en varios navegadores, tengo que seguir probando en el resto de navegadores y otros sistemas... En el que me da un pequeño error es en Firefox donde aparece el borde de las miniaturas desproporcionado, así que lo he eliminado y problema fuera.
      Aquí van los cambios definitivos, por si le vale a alguien o si se puede aportar algo más:

      #gallery { display: none; }
      #jgal {padding:0;margin:0;list-style: none; width: 160px; height: 400px }
      #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; margin-right: 10px; margin-bottom: 10px; }
      #jgal li img { position: absolute; top: 0px; 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);}
      #jgal li.active span {display:none; position:absolute; left:567px; top:0px; width:200px;font-family:arial; color:#666666; font-size:11px; line-height:15px; text-align:justify; visibility: visible; }
      #jgal li.active span {display:block; top: 0px; }
      #jgal li span, #jgal li:visited span { visibility: hidden; }

      Saludos.

      Eliminar
    7. Muchas gracias por publicarlo aquí. ¿Puedes confirmar que además, la parte HTML se hace poniendo el texto metido en un SPAN, justo después de la etiqueta de la imagen?

      Eliminar
    8. Confirmado, la uRL de la imagen además está contenida entre "" y "" y luego iría el SPAN. No me deja publicar el HTML en los comentarios de tu blog, espero que se entienda correctamente. Saludos!

      Eliminar
    9. Vaya... tampoco aparece lo que va entre comillas. ¿Cómo puedo enviarte el html para que lo veas?

      Eliminar
    10. Pasándolo antes a texto plano: http://nosetup.org/php_on_line/convertir_html_texto

      Eliminar
    11. ¡Mucho mejor así! Gracias, no sabía cómo hacerlo... Ahora estaría bien descubrir como poner varias galerías en la misma página.

      <li><i><img alt="" src="URL IMAGEN" /></i><span><b>Lorem ipsum</b><br />Lorem ipsum2</span></li>

      Eliminar
    12. Con este código no se puede hacer eso salvo que las vayas metiendo en otro sitio y luego las pongas en el blog principal mediante un iframe. Así está hecho por aquí.

      Eliminar
  71. Muy buenas noches! Yo necesito ayuda por aquí. De hecho no sé ni cómo explicarlo, simplemente me sale todo "montado". Es mejor que lo vean: http://princessaleka.blogspot.com/p/unas-de-la-semana.html Pueden ayudarme? Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Creo que ya lo resolví, pero igual pasa a echar un vistazo. Gracias!

      Eliminar
    2. Así es. Solucionado. Se ve bien.

      Eliminar
    3. Abre tu enlace en Firefox y fíjate como al seleccionar una de las miniaturas la foto principal se queda seleccionada. En otros navegadores no pasa. ¿sabéis por que pasa esto?

      Eliminar
  72. hola oloman, muchas gracias, tu pagina es realmente util y todo esta muy bien explicado.
    queria hacerte una pregunta, es posible ver la galeria solo en una de las paginas del blog?
    sin que fuese ningun widget, solo meter el codigo en la pagina y ya esta
    muchas gracias!

    ResponderEliminar
    Respuestas
    1. Página y entradas sería lo mismo para este caso. Sólo sigue las indicaciones que se van dando aparte para las entradas. Debajo de cada parte de la explicación se van aclarando las modificaciones que corresponden en ese caso.

      Eliminar
  73. Hola buenas a todos. Estoy utilizando este codigo y me va muy bien, pero al pulsar en una miniatura, la foto principal se queda con una niebla por encima, como si estuviese seleccionada. ¿como puedo quitar eso? gracias.

    ResponderEliminar
    Respuestas
    1. a que te refieres?

      Eliminar
    2. A que he intentado verlo en tu blog pero el único que aparece en tu perfil lanza ese mensaje:
      "Lo sentimos, el blog de aavvlomaverde.blogspot.com se ha eliminado. Esta dirección no está disponible para blogs nuevos"

      Eliminar
  74. Parece ser que solo me lo hace en Mozilla Firefox, en Safari y Crome no lo hace. ¿Sabeis por que puede ser eso?

    ResponderEliminar
    Respuestas
    1. A mí sólo me ocurre cuando cambio de pestaña/ventana y vuelvo a la página de la galería. Supongo que será cosa de como maneja el foco FF.

      Eliminar
    2. Buenas tardes, ya se que de este post hace mucho tiempo. Mi pregunta es si habéis solucionado lo de Firefox porque a mi me lo mantiene seleccionado cada vez que hago clic en una de las miniaturas y eso estropea bastante la galería.. Gracias

      Eliminar
    3. ¿Página dónde tienes eso instalado que la vea? Me refiero a la dirección exacta, no a la del blog.

      Eliminar
  75. Hay algún tutorial en video donde se pueda ver......gracias

    ResponderEliminar
    Respuestas
    1. No, lo siento. Apenas tengo tiempo de redactar estas entradas, por lo que no dispongo de sobrante para hacerlo en vídeo. De todas formas el ejemplo está visible en este mismo post y las instrucciones para hacerlo también están ahí.

      Eliminar
  76. Hola Oloman!

    Lo implementé en http://todaslasriberas.blogspot.com.ar/2010/02/portfolio.html y me encanta pero tengo un problema.

    ¿Hay alguna forma de que las imágenes tengan un alto predeterminado? Porque si pongo height:500px;, por ejemplo, se adapta el alto pero no el ancho, y quedan distorcionadas. La única otra opción que se me ocurre es subir las imágenes con el alto que tendrán, pero el problema sigue para aquellas que son muy chicas, porque aparecen del ancho total del recuadro...


    Gracias!

    ResponderEliminar
    Respuestas
    1. Sería necesario un cambio profundo en el script para intentar lograrlo.

      Tal como está sólo conseguirás un buen resultado con imágenes de más o menos las mismas proporciones y de un ancho mínimo que les de calidad. Las pequeñas se distorsionan al ampliarlas como habrás podido comprobar.

      Eliminar
  77. Hola Oloman

    Ayer probén mi blog esta herramienta pero tengo un pequeño problema que no consigo resolver. Todas las miniaturas me aparecen en una misma línea y ya han tomado todo el ancho de mi página y cada vez que meto una nueva miniatura se sale del recuadro, ¿como puedo hacer para seguir metiendo miniaturas nuevas pero para que me aparezcan una línea más abajo?

    Gracias

    ResponderEliminar
    Respuestas
    1. ¿Un link para ver a qué te refieres exactamente?

      Eliminar
  78. http://mikeladak.blogspot.com.es/p/argazkiak-fotos_3.html

    ResponderEliminar
    Respuestas
    1. Reduce el ancho del #jgal a 400px. Cuando veas lo que ocurre, aumenta el top de #jgal li img hasta 200px.

      Ya con ese ancho (que es el de tu blog) podrás meter todas las líneas de miniaturas que precises y sólo tendrás que ajustar el top que dije anteriormente.

      Eliminar
  79. Voy a probar.

    Muchas gracias

    ResponderEliminar
  80. Buenas!! Ante todo gracias por el post, y ahora te lanzo mi duda...
    ¿como hago para que las miniaturas queden abajo y la imagen ppal encima??
    Saludos, OM

    ResponderEliminar
    Respuestas
    1. Echa un vistazo al enlace de la actualización que hay al final del post.

      Eliminar
    2. Gracias por la respuesta, Oloman, pero creo que o bien el enlace no está bien, o no me expliqué...
      Necesito que las miniaturas queden abajo y la imagen ppal justo encima..
      Gracias de nuevo, Master.

      Eliminar
    3. Era el enlace bueno el que te indiqué (ver el post hasta el final). Lo que pasa es que una vez hecho lo que ahí se explica, si quieres pasar la imagen principal de abajo a arriba, tienes que añadir estas propiedades adicionalmente:
      #jgal {
      top: 300px;
      position: relative;
      }
      #jgal li img {
      top: -300px !important;
      left: 0px !important;
      }

      ...o los valores que correspondan según el formato que finalmente le des.

      Eliminar
  81. Sí señor, muchas gracias por dármelo masticado del todo ;)
    Un abrazo y feliz año!

    ResponderEliminar
  82. no se me ven las imagenes en miniatura, solo se ven cuadros en blanco, ¿que puede ser?

    ResponderEliminar
    Respuestas
    1. Pásame la dirección de la página dónde lo pusiste que lo vea.

      Eliminar
  83. Hola oloblogger!! He seguido varios de tus post sobre slides e imagenes y me han encantado! enhorabuena! Estoy insertando éste para crear un blog de moda, y el PROBLEMA es que quiero que en las miniaturas no se muestre sólo una porcion de la foto grande, si no la foto completa. No se si me explico; es decir, que en las miniaturas aparezcan las fotos completas pero en pequeño y una vez que pinchas se abra la grande...vamos, es ésta misma galería pero con las miniaturas mostrando las fotos enteras...me podrias ayudar por favor? que codigo debo poner para hacerlo?
    Esta es la pagina donde quiero insertarlo:

    http://mistikaweb-pantalones.blogspot.com.es/

    Un millon de gracias!!

    ResponderEliminar
  84. Averiguando...creo que debo cambiar algo de aqui para que en las miniaturas se muestre la imagen completa...pero no se qué cambiar...


    #gallery { display: none; }
    #jgal {padding:0;margin:0;list-style: none; width: 360px; height: 960px }
    #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; margin-right: 10px; margin-bottom: 10px; }
    #jgal li img { position: absolute; top: 0px; left: 300px; display: none; }
    #jgal li.active img { display: block; width:470px; }
    #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
    #jgal li.active span {display:none; position:absolute; left:797px; top:30px; width:200px;font-family:arial; color:#666666; font-size:11px; line-height:15px; text-align:justify; visibility: visible; }
    #jgal li.active span {display:block; top: 20px; }
    #jgal li span, #jgal li:visited span { visibility: hidden; }


    Gracias!!

    ResponderEliminar
  85. Te agradecería un montón una respuesta, porque estoy tratando de hacerlo de mil maneras y no encuentro el modo! Graciasss!!

    ResponderEliminar
    Respuestas
    1. Hola. Lo fácil sería arreglarlo con CSS. Añade en #jgal li estas dos propiedades:
      background-size: cover;
      background-repeat: no-repeat;

      Eso irá bien pero sólo te funcionará perfecto si las imágenes originales tienen la misma proporción que las de las miniaturas.

      Eliminar
  86. Hola que tal. bueno buscando una galeria para mis entradas llegue a tu blog. Me pasan las siguientes cosas cuando intento hacer los pasos, al sacar la etiqueta style, me da error, asi que probe poner todo en la entrada y asi todo bien, solo que la galeria se sale del espacio de la entrada y se superpone con el espacio de comentarios y los botones de g+ facebook y demas, cual es el error??? gracias desde ya, muy bueno el aporte!!

    ResponderEliminar
    Respuestas
    1. Hola. La parte de estilo (CSS) sí la puedes poner en la plantilla. Sería en cualquier parte entre las etiquetas SKIN, pero habría que quitar las etiquetas de apertura y cierre STYLE.

      Si la galería se sale del espacio de la entrada tendrás que cambiar sus dimensiones o usar otra opción que publiqué para que las miniaturas salieran arriba en lugar de en un lado. Es esta

      Eliminar
  87. Ok, bien, ese post ya lo había leído, la cuestión es que en tus entradas las galerías quedan bien ordenadas, en cambio en mis entradas por defecto aparecen al final y se superpone con el espacio de botones g+ etc. y comentarios, como así también con el texto que yo ponga en la entrada, no se porque sucede esto?

    ResponderEliminar
  88. Hola Oloman,

    Muy bueno el codigo!, ahora tengo una pregunta, es posible implementarla mas de una vez en la misma pestaña?? Gracias!

    ResponderEliminar
  89. Hola Oloman, disculpas por traerte tan atrás, quisiera consultarte si es posible hacerle algún cambio a esta galería. Por ejemplo: me gustó para ponerla como portada del blog, y que cada imagen sea un link a una entrada distinta, eso no lo probé aún, pero supongo que es posible agregarle el link a cada imagen. Mi pregunta principal, si tienes tiempo de entrar al blog y verlo es la siguiente: es posible agregar una imagen distinta en la miniatura? definir de antemano la imagen que irá en la miniatura y que no sea el script que la busque y la saque de las imágenes grandes? Si ves en el blog, quisiera que las miniaturas estuvieran más a la izquierda y poner en cada una el cuadradito que corresponde a la imagen de fondo, y que al cliquear te sorprenda la imagen que aparece... Qué te parece? Gracias Oloman por tu atención. SAludos

    ResponderEliminar
    Respuestas
    1. Más sencillamente (lo estuve pensando ahha), quisiera que las miniaturas permanecieran transparentes, como cuando no tienen la imagen incluida, y que en lugar de borde en el cuadradito correspondiente se oscurezca la imagen de fondo, de manera que se vea al ingresar que allí hay algo. Tienen que estar sobre la imagen del negativo, eso sí.

      Eliminar
    2. Hola. Como tú dices, esto me quedó ya muy atrás y ni me acuerdo de cómo funcionaba todo para modificarlo. Además los cambios que propones son prácticamente otro gadget y no este, así que casi que mejor empezar de cero. El problema es que eso ya no es el objeto del blog, dónde no hago cosas personalizadas.
      No obstante, echa un vistazo también a esta otra galería a ver si te cuadra más.

      Eliminar
    3. Gracias Oloman, por tomarte el tiempo para pensar en lo que quiero hacer y recomendarme otra opción. Voy a estudiar esta nueva galería a ver si por mi cuneta puedo hacer los cambios que quiero, como quitar el hover y que las miniaturas no reproduzcan la imagen principal. Ya te preguntaré! Gracias otra vez!!

      Eliminar
    4. quise decir: por mi cuenta...:)

      Eliminar
    5. Seguro que sí podrás hacer las modificaciones que quieres por tu "cuneta" :)

      Eliminar
  90. Hola Oloman, me encanta esta galería!, y el post está muy bien explicado, como es usual por acá.
    Tengo una pregunta: en el tutorial explicás que se puede usar para entradas individuales, ¿funciona también para las entradas estáticas?...
    Mirá, en una página estática me queda así. Revisé muchísimas veces los tres códigos y el problema que encuentro es que pareciera que el código no es leído por la página, entonces por eso aparece la línea punteada arriba de todo. Y ni hablar si quiero poner la galería en horizontal, solo se ven los recuadros pequeños.
    Ojalá puedas ayudarme con este problema, porque por lo demás, queda perfecto.
    Un saludo,

    ResponderEliminar
    Respuestas
    1. No hay problema en usar este código en una página estática. La cuestión es que tu diseño tiene la imagen grande más alta que ancha y entonces necesitas unos ajustes adicionales.

      En primer lugar cambia ese absolute que tienes en la caja contenedora y pon un relative tal y como se explica en esta entrada. Luego añade al selector #jgal un height. Tal que asi:
      #jgal {
      padding: 0;
      margin: 0;
      list-style: none;
      width: 160px;
      height: 560px;
      }

      Eliminar
    2. Muchas gracias, quedó perfecto!

      Eliminar
  91. Buenos dias Oloman he añadido esta galeria a mi blog, con algunas modificaciones y algunos consejos que das en las respuestas y me funciona perfectamente, pero la funcion background-size: cover; no funciona en internet explorer ¿ Tienes alguna soluccion para eso?
    Muchisimas de gracias de antemano y enhorabuena por tu blog he seguido muchos ejemplos tuyos en varios de mis blogs.

    ResponderEliminar
  92. Hola. background-size sólo funciona en IE a partir de la versión 9.

    Hay un filtro IE para escalar, pero no se podría utilizar en este caso, así que lo único que se me ocurre sería utilizar algún javascript como el del enlace.

    ResponderEliminar
  93. Muchas gracias por responder, pero lo que ofreces en esta pagina, junto con algunas modificaciones que se aportan en las preguntas y algo mas es justo lo que necesito asi que al final he conseguido resolver el problema poniendo un div class=..para las imagenes pequeñas, eso luego he redimensionado las imagenes para que se ajusten a las celdas, pero afortunadamente he conseguido que en los otros navegadores siga funcionando el " cover " y en internet explorer entre el div class. De todas formas gracias por tu trabajos es fabuloso y me ha enseñado mucho, aunque ahora estoy con otra entrada tuya que es muy antigua pero que no consigo que me funcione. ( La pagina estatica a pantalla completa )
    Un saludo de nuevo muchas gracias

    ResponderEliminar
  94. oloman como haría para que cuando den clic a la imagen se expanda como de costumbre ? te lo agradeceré bastante

    ResponderEliminar
    Respuestas
    1. Habría que hacer que el script, además de crear el IMG para la imagen principal, también le añadiera un enlace a esa misma imagen, tal y como hace Blogger cuando subimos una fotografía con el editor. Lo que pasa es que este script se me escapa un poco...

      Eliminar
  95. ¿Y para cambiar las miniaturas por otras imágenes y que al dar la imagen en grande sea otra? Siento las molestias pero eso de que se vea la miniatura cortada no queda muy bien que digamos xD

    ResponderEliminar
    Respuestas
    1. Hay muchos sistemas para conseguir cosas parecidas pero no iguales. Lo de esta entrada es una galería casi-automática. Para lo que quieres habría que montar algo totalmente distinto.
      Por ejemplo, Blogger lleva de serie un lightbox que hace más o menos lo que dices: cualquier imagen al pincharla te llevará a una galería en la que se ven todas las imágenes de cada entrada a tamaño original

      Eliminar
    2. No se si hablamos de lo mismo así que voy a poner un ejemplo muy preciso xDD
      http://i.imgur.com/orGKb3Z.gif

      Cambiar la miniatura en vez de que salga la imagen recortada. Con el lightbox de blogger no se cumpliría la función que quiero: una presentación de personajes de un anime de forma interactiva y que quede agradable a la vista.

      Eliminar
    3. Ya te di una pista más abajo, pero lo que intento decirte es que el gadget de esta entrada no es exactamente lo que necesitas y habría que hacer otro diseño y código para que fuera como quieres. Cualquier otra cosa sería sólo "apañar" esto para que se pareciera a lo que quieres.

      Eliminar
  96. Hola buenas yo arregle ese problema poniendo dos imagenes una para la miniatura y otra para la imagen en grande. Aqui te dejo el ejemplo mio http://bibliotecamonovar.blogspot.com.es/p/revistas_29.html

    ResponderEliminar
  97. ¿Y cuál es el código para publicar una imagen de miniatura diferente de la imagen grande?

    ResponderEliminar
    Respuestas
    1. Ve al enlace que te pasaron, pincha sobre la galería con el botón derecho y elige "Inspeccionar elemento". Esto te mostrará el código que usó TelevisiondeMonovar ;)

      Eliminar
  98. OYE AMIGO NO ME APAREN LAS IMAGENES NOSE xq :/ SOLO SE VEN LOS CUADRITOS BLANCOS PERO SON LAS IMAGENES YA BUSQUE Y BUSQUE Y ANDA DE COMO INSERTAR LAS IMAGNES Y QUE SE VEAN :/

    ResponderEliminar
    Respuestas
    1. Súbelas a un post en borrador (no lo publiques) de tu blog y luego desde la pestaña HTML del editor, copia la dirección que les asignó Blogger. Con esa seguro que no te aparecen los cuadraditos.

      Eliminar
  99. Hola. He seguido tus consejos poniendo el código y el script en la plantilla, y al publicar una entrada y poner la galería funciona. Pero si publico otra entrada con la misma galería, funciona, pero deja de funcionar la anterior, apareciendo todas la imágenes en esta última entrada. ¿Hay alguna solución? Gracias por tu ayuda y por tu tiempo.

    ResponderEliminar
  100. Sí, Amador, es el inconveniente que tiene este código y es que sólo puede haber una galería de esta por página.

    Prueba con estas otras opciones si te cuadran:
    http://www.oloblogger.com/2013/11/galeria-imagenes-css-rwd.html
    http://www.oloblogger.com/2016/05/galeria-imagenes-jquery-miniaturas.html

    ResponderEliminar