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>
#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;}
#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?
Gracias Oloman!!!! viste que no se puede ver funcionando, aparece que la página web no está disponible? no importa, voy a probarlo.
ResponderSuprimirOloman, 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.
ResponderSuprimir1. 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
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
ResponderSuprimirgracias.
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.
ResponderSuprimirPosdata-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.
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
ResponderSuprimirun saludo
muchísimas gracias por publicar este post ! he leído tu respuesta a mi comentario en la otra entrada, te lo agradezco otra vez.
ResponderSuprimirahora 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 !
Del batitú, no. Lo veo bien. Supongo que sería un fallo web temporal.
ResponderSuprimirFroilá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.
Se coló tu comentario mientras escribía otro Leti :) No hay de qué.
ResponderSuprimirOloman como lo que has añadido ha quedado perfecto, este es el resultado http://sollelcuerpo.blogspot.com/p/galeria.html
ResponderSuprimirMuchisimas gracias de de nuevo por la ayuda.
Me alegro Dreamare :D
ResponderSuprimirOloman, 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.
ResponderSuprimirBuen fin de semana
Gracias por hacérmelo saber Froilán.
ResponderSuprimirHola Oloman es de mucha utilidad tu blog, te agradezco mucho desde ya si me podés responder lo siguiente.
ResponderSuprimirHice 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!
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.
ResponderSuprimirNecesito ayuda ,soy nuevo en esto, como hago para que los usuarios puedan agregar sus fotos a mi blog?
ResponderSuprimirSaludos y gracias
garzonel14@yahoo.es
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.
ResponderSuprimires 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
ResponderSuprimirhttp://caminorockperu.blogspot.com/p/concierto.html
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.
ResponderSuprimirhola 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.
ResponderSuprimiragradecere mucho tu ayuda y esta muy bueno tu blog,saludos
¡51 Carlos! Tienes 51 :)
ResponderSuprimirSupongo que ya viste que era cuestión de cambiar el valor del top en #jgal li img ;)
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 =)
ResponderSuprimirHola! tengo una preguntita, ¿seria posible que las imagenes se fuesen pasando solas?
ResponderSuprimirGracias
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.
ResponderSuprimirHola Oloman!!
ResponderSuprimirMe 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! :)
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.
ResponderSuprimirSi quieres entrar más en detalle, echa un vistazo a este comentario y a los siguientes.
MUY BUENO!!
ResponderSuprimirhace 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!
Te quedo bien EpideMia ;)
ResponderSuprimirHola oloman antes de todo felicidades por el blog tiene de todo.
ResponderSuprimirMi pregunta es si hay alguna manera de poner un link a la imagen grande , enlazarla a alguna entrada.
Saludos y Gracias!!
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.
ResponderSuprimirHay alguna forma de que en las miniaturas se viera la foto completa o por lo menos casi (en pequeño claro)?
ResponderSuprimirEl 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.
ResponderSuprimirExcelente 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!!
ResponderSuprimirPara ilustrar lo que le digo:
http://verparadescargar.blogspot.com/
DOM la carga lenta se debe en parte al script, pero principalmente al número y tamaño de las imágenes a mostrar.
ResponderSuprimirLo 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.
¡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.
ResponderSuprimir¿Alguna recomendación? ¡Muchisimas gracias!
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?
ResponderSuprimir¡Gracias de nuevo!
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?.
ResponderSuprimirEste es el enlace: http://www.jesusnazarenopozoblanco.org/blog/?p=6180
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.
ResponderSuprimirSobre 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.
Disculpa Oloman no me havia fijado al final del post de esta mejora.
ResponderSuprimirLa 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.
¿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
ResponderSuprimirSi es complicado Oloman no hay problema.
ResponderSuprimirLo que si, poder alinear las miniaturas y centrar la galeria, porque no logro solucionarlo, como puedo hacer?.
Un abrazo que andes bn.
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.
ResponderSuprimirMartí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
ResponderSuprimirRICKYMENPLAT, 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 ;)
Gracias Oloman.... tendré en cuenta los iframes.
ResponderSuprimir:D
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.
ResponderSuprimirMuchí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
ResponderSuprimirSaludos, te sigo ;)
La verdad es que queda muy bien para casos como el tuyo. Saludos.
Suprimir