Sencilla galería de imágenes... en horizontal | Oloblogger Anteriormente vimos un sistema para hacer una galería de imágenes con miniaturas como esta: La cuestión es que algunos necesitan o simpl...

7 de febrero de 2011

Sencilla galería de imágenes... en horizontal

Anteriormente vimos un sistema para hacer una galería de imágenes con miniaturas como esta:


La cuestión es que algunos necesitan o simplemente prefieren, que las miniaturas se muestren arriba de la imagen principal y no a la izquierda. Lo cierto es que esa es una forma de que las imágenes a tamaño "original" se vean más grandes.

En aquella entrada ya se explicó cómo instalar todo, por lo que ahora sólo vamos a indicar los cambios que sobre aquel código habría que hacer para conseguir esto.

Sólo necesitamos ajustar la parte CSS. Los cambios los he marcado en verde para que los encontréis más rápido. Después del código comento un poco los cambios.

<style type="text/css">
#gallery {display: none;}
#jgal {padding:0;margin:0;list-style: none; width: 500px;}
#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: 160px; left: 0px; display: none; }
#jgal li.active img { display: block; width:500px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>

Como podéis ver, lo único que hemos hecho ha sido ampliar el ancho destinado para la imagen principal (#jgal li.active img --> 500px) y al no necesitar espacio a la derecha de las miniaturas, también el de estas, que ahora será el mismo que en aquella (#jgal --> 500px). Luego reposicionamos el punto de origen para mostrar la imagen principal, en función del nuevo diseño (#jgal li img --> top:160px left:0px).


Por último, para cambiar el tamaño de las miniaturas y que cuadren con el nuevo ancho disponible, hay que cambiar el ancho y alto de estas en #jgal li y después ajustar el top de jgal li img. Así recolocamos consecuentemente la imagen principal. Por cierto, que las miniaturas no tienen porque ser cuadradas.

Un ejemplo con:

#jgal {width:500px;}
#jgal li {width: 34px; height: 84px;}
#jgal li img {top:100px; left:0px;}
#jgal li.active img {width:500px;}

¿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

94 comentarios :

  1. Gracias Oloman!!!! viste que no se puede ver funcionando, aparece que la página web no está disponible? no importa, voy a probarlo.

    ResponderEliminar
  2. Oloman, me viene de perlas para una nueva sección que voy a inaugurar en "Curiosón". Lo he estado experimentando en un blog de pruebas que utilizo para estos casos, antes de subirlo al principal. Y lo he conseguido pero quería consultarte dos pequeños problemas que me da.
    1. Las imágenes que aparecen por encima, no están alineadas.
    2. La sección de comentarios se incrusta en las imágenes.
    O lo que puede ser el post siguiente.
    Gracias por tu ayuda. Salud2

    ResponderEliminar
  3. hola oloman, a mi me sucede lo mismo que a Froilan aqui esta la pagina de pruebas donde lo monte http://sollelcuerpo.blogspot.com/p/galeria.html
    gracias.

    ResponderEliminar
  4. No se si me podrás ayudar, yo te ofrezco publicidad o lo que quieras en lo que yo te pueda servir. Te cuento; tengo un blog de tele y quiero cambiar la plantilla, pero no se adaptarla bien, porque es de las "complicadas". El blog es www.queridatele.blogspot.com y una de las plantillas que estoy barajando es una llamada "NewZine". Te estaría MUY agradecido. Espero respuesta.

    Posdata-Arriba dices que ayudas en algo concreto, el blog ya esta, y yo ya se que es lo que quiero poner, pero no se como.

    ResponderEliminar
  5. Oloman justo esto era lo que andaba buscando para un blog de viajes, pues al poner la otra galería de imágenes no me terminaba de convencer el resultado

    un saludo

    ResponderEliminar
  6. muchísimas gracias por publicar este post ! he leído tu respuesta a mi comentario en la otra entrada, te lo agradezco otra vez.
    ahora que lo explicas, lo de los anchos y tamaños de las imágenes, me queda mucho más claro.
    felicidades y mi más sincera admiración por el trabajo que inviertes en tu blog, así como en su utilidad !
    saludos !

    ResponderEliminar
  7. Del batitú, no. Lo veo bien. Supongo que sería un fallo web temporal.

    Froilán De Lózar soy muy burro y me hace falta verlo para estar seguro de lo que pasa. De todas formas como con el enlace de Dreamare sí lo he podido ver, os contesto a los dos en una. El tema se arregla poniendo un HEIGHT en #jgal con un valor suficiente como para que todo quepa. Probad con
    #jgal {padding:0;margin:0;list-style: none; width: 500px;height:500px;}

    Adicto tv por aquí con un enlace tenemos suficiente y sólo si crees que este espacio puede merecerlo. No conozco la plantilla que quieres instalar, pero es que tampoco la he encontrado para echarle un vistazo. La cosa es que no me puedo comprometer a montar un blog por falta de tiempo. Sin embargo, sí puedo echarte una mano con alguna duda concreta. Según dices así es. Por tanto, adelante.

    A mí tampoco me gustaba la otra manera Jose R., por eso le dí una vuelta al código para ver cómo podía conseguir este resultado. Finalmente no era tan complicado.

    ResponderEliminar
  8. Se coló tu comentario mientras escribía otro Leti :) No hay de qué.

    ResponderEliminar
  9. Oloman como lo que has añadido ha quedado perfecto, este es el resultado http://sollelcuerpo.blogspot.com/p/galeria.html
    Muchisimas gracias de de nuevo por la ayuda.

    ResponderEliminar
  10. Oloman, gracias por tu tiempo. El lunes despejaré la incógnita. Ya te remitiré la prueba, porque, como no podía ser menos, hago alusión expresa a tu inestimable ayuda.

    Buen fin de semana

    ResponderEliminar
  11. Gracias por hacérmelo saber Froilán.

    ResponderEliminar
  12. Hola Oloman es de mucha utilidad tu blog, te agradezco mucho desde ya si me podés responder lo siguiente.

    Hice la galería de imágenes como en la primera entrada y me gusta mucho, sin embargo como tengo muchas fotos la imagen principal siempre queda arriba, te darás cuenta mirando acá http://lucianafarisello.com.ar/1997/02/tortas.html

    ¿Hay alguna posibilidad de que esa imagen principal vaya bajando a medida que baja la página?

    Gracias!

    ResponderEliminar
  13. Sin gatantías Lu, porque en un principio habría que cambiar bastantes más cosas para que quedara perfecto, pero prueba a cambiar el ABSOLUTE de #jgal li img por un FIXED.

    ResponderEliminar
  14. Necesito ayuda ,soy nuevo en esto, como hago para que los usuarios puedan agregar sus fotos a mi blog?
    Saludos y gracias
    garzonel14@yahoo.es

    ResponderEliminar
  15. No se puede Generaciones. Lo único que podrías hacer, sería darles permisos para publicar entradas y evidentemente, en ellas podrían subir fotos. Pero claro, cada uno sólo podría modificar (agregar imágenes) en sus propias entradas. Tú exclusivamente como administrador, podrías meterte en las de los demás.

    ResponderEliminar
  16. es muy interesante el blog muy buenas recomendaciones me sirve de ejemplo para editar mi blog pero tengo un problema en este momento en cuanto a esta plantilla de imagenes ya qe el lugar donde deberia ser permitido los comentarios esta sobrepuesto el de las imagenes y no se qe editar esta es el url y tambien adjunto el c.html


    http://caminorockperu.blogspot.com/p/concierto.html

    ResponderEliminar
  17. Camino Rock, he accedido al enlace, pero no veo nada. De todas formas, si se superpone la galería a otro elemento, prueba a darle al div con el que la formas, un altura determinada (height) suficientemente grande como para saltar lo que venga después. Luego la ajustas a tus necesidades.

    ResponderEliminar
  18. hola Oloman, me gustaria implementar esta galeria a mi blog,hize unas pruebas y sale bien siempre y cuando ponga 12 imagenes,si pongo mas unas cuantas miniaturas quedan sobre la imagen grande,entonces quisiera poner una galeria de 50 imagenes en un misma entrada pero por lo mismo de que para que salga bien debe ser de 12 imagenes,quiero poner varias galerias hasta cubrir las 50 imagenes pero no se como ponerlas demas pues la primera que pongo sale pero las siguientes no,uff haber si me explique jaja.
    agradecere mucho tu ayuda y esta muy bueno tu blog,saludos

    ResponderEliminar
  19. ¡51 Carlos! Tienes 51 :)

    Supongo que ya viste que era cuestión de cambiar el valor del top en #jgal li img ;)

    ResponderEliminar
  20. la verdad no supe ni como le hize, como siempre de desesperado a moverle por aqui y por alla jajaja, pero ya me queda mas claro, muchas gracias por tu ayuda, que buena onda de tu parte que ayudas a todos los que te consultamos,de menos ya puse un enlace a tu blog en el mio,muchas gracias =)

    ResponderEliminar
  21. Hola! tengo una preguntita, ¿seria posible que las imagenes se fuesen pasando solas?

    Gracias

    ResponderEliminar
  22. Keyra, lo que quieres es otra cosa distinta de esta. En el argot, eso se llama slide (presentación). Si buscas con esa palabra, seguro que encuentras varios sistemas.

    ResponderEliminar
  23. Hola Oloman!!

    Me gustaría saber como puede implementar esta galería más de una vez en una misma entrada, es posible? Lo he intentado pero no pude hacerlo.

    Muchas gracias de antemano y excelente blog! :)

    ResponderEliminar
  24. ChrisUckermannNews, esta galería no sirve para eso. Se podría hacer una apaño, pero es bastante complicado y no merece la pena. Mejor buscar otro script que si lo permita.

    Si quieres entrar más en detalle, echa un vistazo a este comentario y a los siguientes.

    ResponderEliminar
  25. MUY BUENO!!
    hace mucho que quiero poner una galería y nunca me convence ninguna.

    me quedó muy bien. muchas gracias.

    si queres ver el resultado acá está:
    http://epidemia-mella.blogspot.com/2011/05/fotos-este-fue-el-primero-te-vas-perder.html

    gracias oloman!

    ResponderEliminar
  26. Te quedo bien EpideMia ;)

    ResponderEliminar
  27. Hola oloman antes de todo felicidades por el blog tiene de todo.
    Mi pregunta es si hay alguna manera de poner un link a la imagen grande , enlazarla a alguna entrada.
    Saludos y Gracias!!

    ResponderEliminar
  28. No Karim55, no hay una forma de hacer eso. Bueno, no hay forma de hacerlo fácil. Habría que cambiar el script que monta las imágenes y se complicaría mucho si cada imagen tuviera que tener su propio enlace. Con un enlace igual para todas, quizás la cosa se simplificaría.

    ResponderEliminar
  29. Hay alguna forma de que en las miniaturas se viera la foto completa o por lo menos casi (en pequeño claro)?

    ResponderEliminar
  30. El que se vean todas las miniaturas enteras pero en pequeño, tiene un inconveniente shootingideas. Eso es sencillo y se hace forzando el ancho y el alto de cada #jgal li img al ancho y alto del contenedor de miniaturas. El problema es que todas las imágenes tendrían que ser cuadradas, de lo contrario se verían distorsionadas. Con el sistema de "recorte", ni tienen que ser cuadradas ni tienen que ser del mismo tamaño. Para mí es más práctico que no se vean enteras.

    ResponderEliminar
    Respuestas
    1. Hola Oloman, estoy probando agregar en una página de mi blog esta galería y me parece importante (al menos en mi temática) que las miniaturas sean la misma foto completa, pero de 60 x 60. Te agradecería si puedes ampliar lo de 'forzar ancho y alto del contenedor de miniaturas', será sencillo ... pero no tanto para una torpe muy torpe!

      Eliminar
    2. Ahora es más sencillo que cuando expliqué esto. Sólo añade a #jgal li un
      background-size: cover;

      Esa propiedad no la conocía antes. No te funcionará en navegadores antiguos pero sí en la mayoría.

      Eliminar
    3. Quedó perfecto, de nuevo gracias!

      Eliminar
  31. Excelente amigo Felicidades por su blog..!! Recién estoy creando el mio y me interesó esta galería de imágenes por lo que opte por implementarla. En las entradas se ve perfecto aunque con una carga lenta se aprecian las imágenes grandes y separadas, luego si se acomodan a pesar del "display:none" en el código. Pero mi mayor problema es al ver varias entradas, la primera galería sale bien y las demás (por ahora solo tengo 2 xD) como le describí: imágenes grandes y separadas. Sería muy útil su orientación, hice todo lo que dice y pegué el código en la plantilla para utilizarlo en múltiples entradas. Gracias de antemano!!
    Para ilustrar lo que le digo:
    http://verparadescargar.blogspot.com/

    ResponderEliminar
  32. DOM la carga lenta se debe en parte al script, pero principalmente al número y tamaño de las imágenes a mostrar.

    Lo que dices es una cosa que ya se ha comentado, pues no es posible poner más de una galería en la misma página. Por tanto, en las páginas dónde hay varias entradas, sólo se verá una galería.

    La solución es hacer un sistema de sumarios para mostrar las entradas resumidas en las páginas de Inicio y de navegación (para no usar las galerías en este tipo de páginas). Y por supuesto, no usar dos galerías en la misma entrada.

    ResponderEliminar
  33. ¡Hola! Muchísimas gracias por este tutorial, me encantó y me ha resultado muy útil. Lo único es que tengo un problema. Lo he intentado poner para una página de blogger, de las nuevas que están poniendo y en vez de meterse en ella, sale fuera, no sé si me explico. No se limita al espacio de la página si no que se configura y se queda flotando fuera.
    ¿Alguna recomendación? ¡Muchisimas gracias!

    ResponderEliminar
  34. Te dejo el ejemplo por aquí http://i121.photobucket.com/albums/o228/GALADRIEL_16/page.jpg. Y una dudita más, ¿se puede hacer la imágen principal más grande?

    ¡Gracias de nuevo!

    ResponderEliminar
  35. Buenas, un saludo. Escribo al hilo de este post, porque he visto una pequeña galería para mostrar fotos en un post con efecto rotación, PERO DESCONOZCO cómo lo habrán hecho: he mirado en el código, y resulta que está insertado en esa web como un gif, pero salen varias fotos. Esto debe ocupar muy poco espacio. ¿Sabéis cómo lo han hecho? Sería estupendo saberlo, para aplicarlo nosotros, ¿no creéis?.
    Este es el enlace: http://www.jesusnazarenopozoblanco.org/blog/?p=6180

    ResponderEliminar
  36. Desire, lo cierto es que en la captura que me pasas no veo ninguna galería. Además observo que era una Vista Previa y no un post publicado. Lo comento porque no recuerdo si en la vista previa era visible la galería. Quizás tengas que hacer un post de prueba y publicarlo.
    Sobre el tamaño de la imagen, precisamente en esta entrada que es ampliación de otra anterior, se explica que haciendo más grande el espacio de la imagen principal, es como se puede conseguir la galería en horizontal. Tienes que cambiar el valor del ancho en #jgal li.active img

    Lilolaleilo, efectivamente es un gif ANIMADO. Aquí puedes ver lo único que he explicado al respecto: Crear imágenes animadas.

    ResponderEliminar
  37. Disculpa Oloman no me havia fijado al final del post de esta mejora.
    La aplique aqui y dentro de todo quedo bien pero como hago para: centrar la galeria, alinear las miniaturas y ponerlas por debajo de la principal.
    Desde ya muchas gracias Oloman.
    Saludos.

    ResponderEliminar
  38. ¿Es imprescindible que estén abajo Martín? Es que para eso habría que cambiar el script de manera que primero se "imprimiera" la imagen y después la galería de miniaturas y la verdad es que ando mal de tiempo... como siempre, por otra parte :S

    ResponderEliminar
  39. Si es complicado Oloman no hay problema.
    Lo que si, poder alinear las miniaturas y centrar la galeria, porque no logro solucionarlo, como puedo hacer?.
    Un abrazo que andes bn.

    ResponderEliminar
  40. Muchas Gracias Oloman... La galería quedo excelente. Quiero poner dos galerías en una sola página...¿Como le hago?... Así como en los ejemplos de arriba. Gracias Oloman.

    ResponderEliminar
  41. Martín Rocha con un margin:0px auto; en #jgal, debería valer. De todas formas debes haber quitado el estilo del todo porque ya ni hay galería ni nada :S

    RICKYMENPLAT, no es posible. El script funciona con un ID único y no se pueden usar dos en la misma página sin tener problemas. Aquí use un truquillo que no es práctico si se pretende hacer esto con frecuencia. Por si te interesa, simplemente son iframes. Cada galería que ves está realmente en otra página ;)

    ResponderEliminar
  42. Gracias Oloman.... tendré en cuenta los iframes.

    :D

    ResponderEliminar
  43. RICKYMENPLAT, se me olvidó comentar que lo que hice exactamente fue un blog "auxiliar" y ahí fui publicando cada galería en un post distinto. Luego en cada iframe indiqué la dirección de cada uno de ellos. Usé una plantilla sin cabecera, footer, barras laterares ni ninguna otra cosa más que no fuera el contenido del post, o sea, la galería. Por cierto, en esa otra página es dónde entonces tendrás que poner el script, pues en la "principal" no será necesario.

    ResponderEliminar
  44. Muchísimas gracias Oloman, gran truco y muy útil,me ha costado un poco pero lo he conseguido y me ha quedado genial, aquí se puede ver http://galissia.blogspot.com/2011/12/apartamento-con-vistas-al-mar_29.html
    Saludos, te sigo ;)

    ResponderEliminar
    Respuestas
    1. La verdad es que queda muy bien para casos como el tuyo. Saludos.

      Eliminar
  45. hola, pude armar la galeria con las miniaturas pero no se ven las fotos, no se qué error estoy cometiendo, probé con las miniaturas al costado y arriba, el diseño queda pero sin imágenes, gracias

    ResponderEliminar
  46. no te pasé http://www.tortas-olivia.com.ar/p/galeria.html, espero tu comentario gracias

    ResponderEliminar
    Respuestas
    1. Creo que lo que tienes mal son las direcciones de las imágenes. Para obtener las buenas, una vez con la imagen de Picasa delante, con el botón derecho "Copiar URL de la imagen". Esta es por ejemplo una de ellas https://lh3.googleusercontent.com/-zYEULLYV7Zc/TZC7wDCaDtI/AAAAAAAAHeo/8k7mSGHVhRA/s720/DSC_0343.JPG

      Eliminar
    2. muchas gracias!! soy maría. solucioné el tema de URL, pero ahora no se ven bien las miniaturas, podrás fijarte de nuevo?? http://www.tortas-olivia.com.ar/p/galeria.html
      otra consulta, tengo que poner 15 fotos, las miniaturas pueden ir a ambos lados, para que no quede tan larga la lista?

      Eliminar
    3. Con el espacio que tienes lo mejor sería usar imágenes algo más cuadradas y no tan alargadas. De todas formas, como apaño fácil prueba a incrementar este width:
      #jgal li.active img {
      display: block;
      width: 480px;
      }

      Y una vez que controlas el tema, para que la imagen principal se vea todavía más grande te convendría usar el sistema de este mismo post, el que muestra las miniaturas arriba.

      Eliminar
  47. se puede insertar en mas de una ocasion en una misma entrada con imagenes diferentes??

    Gracias anticipadas

    ResponderEliminar
  48. Oloman me gustaria saber como haces eso que explicas en el comentario 44...si puedes..

    gracias de antemano!!

    ResponderEliminar
    Respuestas
    1. Con este me despacho tus dos mensajes.

      No se pueden poner dos cacharros de estos en la misma página y por eso la solución sería usar IFRAME. Un iframe es como una ventan desde la que ver otro sitio. Se trataría entonces de abrir otro blog sin nada de nada (ni cabecera, ni pie, ni barras laterales, ni fondos...) y ahí hacer entradas, una por cada galería.

      Luego con iframe (ver enlace) las colocas dónde quieras.

      Eliminar
  49. gracias hermano nueva vez...Eres genial!!

    ResponderEliminar
  50. Hola,muchas gracias,esta buenisimo,pero tengo una consulta,como hago para cambiar el color del borde de las imagenes?muchas gracias!

    ResponderEliminar
    Respuestas
    1. me olvide de preguntar otra cosa, se me superpone las fotos a otras entradas,lei de cambiar el height en el div pero no lo encuentro,el unico que encuentro es el heigh de las miniaturas...muchas gracias!

      Eliminar
    2. me di cuenta de otra cosa tambien, cuando paso de foto en foto siempre me aparecen seleccionadas( o sea como si la seleccionara para copy paste,media azul, ) eso se puede cambiar?...gracias!

      Eliminar
    3. Hace tiempo que publiqué esto y ya no recuerdo como iba todo, además de que la idea la saqué de otro sitio que tuve el fallo de no poner.

      De momento te puedo contestar a lo del borde, que se cambia en esta parte modificando el valor #fff del border por el del color que quieres:
      #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; }

      Para las otras dos cosas me tendrías que pasar la dirección de la página dónde lo tienes puesto para verlo. No lo he encontrado en ninguno de los dos sitios que tienes en tu perfil.

      Eliminar
    4. Ahi lo hize,ves que se me superpuso una entrada sobre otra? aunque aca se me superpuso poco,en el blog que uso se me habia superpuesto completamente...

      Eliminar
    5. si necesitas que te pase print image de edicion html te lo paso,como mucho no entiendo igual me quedo medio quilombo,xq creo que puse como muchos script de jquery entre < head>, diferentes versiones etc, y no se cual ni como usa,

      Eliminar
    6. y no me cambia el color de la foto grande,solo la miniatura

      Eliminar
    7. Pero ¿dónde está? Pásame la dirección de la entrada que no tenga que estar buscando.

      Eliminar
  51. http://www.blogger.com/blogger.g?blogID=3666872131000971759#templatehtml , no se como enviartela por privado...

    ResponderEliminar
    Respuestas
    1. Tienes que publicarla (aunque sea con una fecha antigua para que no se vea la primera). Luego accedes al post y de ahí es de dónde tienes que copiar la dirección. Esa que me mandas es la provisional de cuando estás editando y nadie la puede ver una vez que te sales de la edición.

      Eliminar
  52. Me gusta el ultimo, pero como pongo las imagenes.

    ResponderEliminar
    Respuestas
    1. Hola. Al principio del post hay un enlace a otra entrada en dónde se explica al completo. Esto son variaciones sobre una primera versión, así que móntalo como allí se indica y luego modifícalo.

      Eliminar
  53. Hola Oloman, muchas gracias por el aporte. Tengo muchas imágenes y quisiera que las miniaturas estuviesen en una sola "fila" y que funcionara con un slider. Algo así:
    < img img img img img >

    Donde los signos de mayor y menor son los sliders y las letras img son las imágenes.

    Muchas muchas gracias

    ResponderEliminar
    Respuestas
    1. Sobre sliders creo que sólo he publicado este, pero no dispone de pase manual.

      Eliminar
  54. Anónimo2/4/14, 1:28

    Gracias Oloman me encantó... está increíble solo un ajuste: ¿qué tendría que modificar para que las miniaturas quedaran debajo de la imagen grande? de antemano gracias por tu respuesta :)

    ResponderEliminar
    Respuestas
    1. Anónimo3/4/14, 0:38

      Me respondo: No se si sea la mejor alternativa pero lo resolvi con un "padding". Saludos!

      Eliminar
    2. Si te funcionó, seguro que era una alternativa ;)

      Eliminar
  55. Por favor me puedes decir como le coloco pie de pagina o una leyenda a las imagenes que no sea con "alt" ?

    ResponderEliminar
    Respuestas
    1. Es una "sencilla" galería, Yeisi. No es fácil insertarle esos rótulos.

      Eliminar
  56. Buenass. Habría alguna opción de poner solamente esta galería dentro de una entrada de blogger?

    ResponderEliminar
  57. Hola Anna. En la otra versión para las miniaturas en un lateral, se explica como ponerlo para entradas. Luego sólo es cuestión de cambiar el CSS por este si es que las quieres encima. Este es el enlace.

    ResponderEliminar
  58. Hola Oloman en primer lugar excelente blog, este junto a Ciudad Blogger han sido maestros, queria preguntarte, estoy buscando hacer una galería como la que aparece aqui:
    http://joyeriavlynder.com/aderezos.html
    la verdad la necesito igual.

    de antemano agradezco toda la colaboración,

    ResponderEliminar
    Respuestas
    1. Lo único que te puedo decir es que usa un JavaScript con jQuery que se llama jCarousel. Es este, así que supongo que siguiendo las instrucciones del creador podrás replicarlo.

      Eliminar
    2. Ey!!! muchas gracias por tu ayuda, inmediatamente me pongo a trastear con esto y te cuento

      Eliminar
  59. Esta Genial pero me gustaria mas que las imagenes fueran cambiando automaticamente
    por ejemplo luego de 5 segundos cambiara a la imagen siguiente :D pero aun asi esta muy bueno Muchas Gracias

    ResponderEliminar
  60. man, una pregunta, como podría hacer para cambiar de imagen con una "fechas"???
    Entiendo que para que cambie solo debo cambiar de la class .active, pero no he encontrado como hacerlo, intenté con .next('li') y con .siblings('li'), pero next no hace nada y .siblings le se la asigna a todos los "hermanos", please es urgente!!!

    ResponderEliminar
  61. Esto va para ambos, Jerson y Juan Felipe. Este visor es lo que es y si hiciera otras cosas pues sería otro visor con otras funcionalidades y evidentemente otro código seguramente muy distinto.
    Se trata de un gadget estático, si lo que queréis es un slider, echad un vistazo a este otro post ;)

    ResponderEliminar
  62. Hola. Muy bueno esta galería. ando buscando lo mismo pero no para imagens sino para archivos swf. Me explico: Estos archivos flash (swf) corresponden a libros que eran pdf y los he convertido en swf para no facilitar la descarga ni copia de los mismos. Entonces todo bien hasta allí. Puedo publicarlos de esa forma. el tema es que hay algunos libros muy grandes, con muchas páginas, y esto hace el archivo más pesado. Y más allá de que no hay (o no encuentro) hosting de archivos flash de más de 20mb, tampoco conviene, porque esto demora la carga de los mismos y no hace agradable entonces la navegación. Por ejemplo tengo un libro que en swf pesa 200mb. Imagina estar esperando a que se cargue todo. No tiene sentido.

    Entonces la idea es dividir ese libro (ya sea por capítulos, temas, etc) en varios archivos swf más pequeños. Que se carguen rápido. Todo bien hasta allí. Se cómo dividirlos. y ya los puedo publicar sin problemas.

    El tema es que me gustaría hacer algo así como el esquema que tiene esta galería. Que todas esas partes de libros, así como cada imagen de aquí, tengan una miniatura (puede ser una imagen o un texto) y aparescan en una "lista" superior. De modo que uno cliquee en, por ejemplo "Capítulo 1" y abajo se cargue el swf respectivo con esa parte.

    Vi que tenías algo parecido a lo que digo pero videos de youtube aquí: http://www.oloblogger.com/2015/03/cargador-videos-javascript.html

    Bueno intenté ver si podía valerme de ese cídgo y no pude adaptarlo para archivos flash q no sean de youtube.

    Gracias por la atención. Espero haber sido claro y me respondas.

    ResponderEliminar
    Respuestas
    1. Migue, aunque esto te pueda parecer adaptable a lo que necesitas, no tiene nada que ver. Cada código sirve para una sola cosa y este hace lo que hace... con imágenes.

      Con respecto al otro del cargador de vídeos, la idea sí que te podría valer, pero no así el desarrollo que yo hice, ya que aproveché unas características comunes a todos los vídeos de YouTube. Su código para embeber son todos exactamente iguales y sólo difieren en su ID. Aprovechando eso fue cómo hice aquello, pero dudo que con tus flash pase lo mismo. Además también utilicé una miniatura que YouTube genera en función precisamente de esa ID y también supongo que los flash no generarán ninguna.

      En resumen: La idea de los vídeos te podría servir pero habría que desarrollar un nuevo código.

      Eliminar
  63. Hola!
    Estoy probando este tutorial, me funciona perfectamente
    pero me gustaría poner las imágenes en miniatura debajo de la imagen grande y principal.
    He intentado varias cosas pero no me funciona, podrías ayudarme?

    ResponderEliminar
    Respuestas
    1. Hola. Con este sistema no puedes poner la imagen grande encima de las miniaturas, ya que está pensado para admitir cualquier altura de imágenes y eso condiciona el resto del código. Si pinchas en las distintos miniaturas de la demo verás como la imagen grande unas veces se va más abajo y otra queda más arriba.
      Para lo que tú quieres tendrás que usar otro sistema en lugar de este.

      Eliminar
    2. Wedding Dance, acabo de publicar un nuevo post con otro sistema que creo te interesará ;)

      Eliminar
    3. en donde lo publico

      Eliminar
    4. en donde lo publico

      Eliminar
  64. hola esto es lo que estaba buscando pero a mi me gustaria que las imagenes pequeñas estubieran abajo de la imagen grande, te agradeseria tu ayuda

    ResponderEliminar
    Respuestas
    1. Hola Roci MIn. En este enlace tienes la otra galería que indiqué. Está con el formato que entendí que quieres.

      Eliminar