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 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.
Y muchos más artículos interesantes si nos sigues en...
Gracias Oloman!!!! viste que no se puede ver funcionando, aparece que la página web no está disponible? no importa, voy a probarlo.
ResponderEliminarOloman, 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.
ResponderEliminar1. 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
ResponderEliminargracias.
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.
ResponderEliminarPosdata-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
ResponderEliminarun 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.
ResponderEliminarahora 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.
ResponderEliminarFroilá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é.
ResponderEliminarOloman como lo que has añadido ha quedado perfecto, este es el resultado http://sollelcuerpo.blogspot.com/p/galeria.html
ResponderEliminarMuchisimas gracias de de nuevo por la ayuda.
Me alegro Dreamare :D
ResponderEliminarOloman, 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.
ResponderEliminarBuen fin de semana
Gracias por hacérmelo saber Froilán.
ResponderEliminarHola Oloman es de mucha utilidad tu blog, te agradezco mucho desde ya si me podés responder lo siguiente.
ResponderEliminarHice 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.
ResponderEliminarNecesito ayuda ,soy nuevo en esto, como hago para que los usuarios puedan agregar sus fotos a mi blog?
ResponderEliminarSaludos 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.
ResponderEliminares 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
ResponderEliminarhttp://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.
ResponderEliminarhola 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.
ResponderEliminaragradecere mucho tu ayuda y esta muy bueno tu blog,saludos
¡51 Carlos! Tienes 51 :)
ResponderEliminarSupongo 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 =)
ResponderEliminarHola! tengo una preguntita, ¿seria posible que las imagenes se fuesen pasando solas?
ResponderEliminarGracias
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.
ResponderEliminarHola Oloman!!
ResponderEliminarMe 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.
ResponderEliminarSi quieres entrar más en detalle, echa un vistazo a este comentario y a los siguientes.
MUY BUENO!!
ResponderEliminarhace 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 ;)
ResponderEliminarHola oloman antes de todo felicidades por el blog tiene de todo.
ResponderEliminarMi 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.
ResponderEliminarHay alguna forma de que en las miniaturas se viera la foto completa o por lo menos casi (en pequeño claro)?
ResponderEliminarEl 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.
ResponderEliminarHola 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!
EliminarAhora es más sencillo que cuando expliqué esto. Sólo añade a #jgal li un
Eliminarbackground-size: cover;
Esa propiedad no la conocía antes. No te funcionará en navegadores antiguos pero sí en la mayoría.
Quedó perfecto, de nuevo gracias!
EliminarExcelente 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!!
ResponderEliminarPara 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.
ResponderEliminarLo 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.
ResponderEliminar¿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?
ResponderEliminar¡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?.
ResponderEliminarEste 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.
ResponderEliminarSobre 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.
ResponderEliminarLa 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
ResponderEliminarSi es complicado Oloman no hay problema.
ResponderEliminarLo 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.
ResponderEliminarMartí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
ResponderEliminarRICKYMENPLAT, 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.
ResponderEliminar: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.
ResponderEliminarMuchí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
ResponderEliminarSaludos, te sigo ;)
La verdad es que queda muy bien para casos como el tuyo. Saludos.
Eliminarhola, 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
ResponderEliminarno te pasé http://www.tortas-olivia.com.ar/p/galeria.html, espero tu comentario gracias
ResponderEliminarCreo 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
Eliminarmuchas 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
Eliminarotra consulta, tengo que poner 15 fotos, las miniaturas pueden ir a ambos lados, para que no quede tan larga la lista?
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:
Eliminar#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.
se puede insertar en mas de una ocasion en una misma entrada con imagenes diferentes??
ResponderEliminarGracias anticipadas
Oloman me gustaria saber como haces eso que explicas en el comentario 44...si puedes..
ResponderEliminargracias de antemano!!
Con este me despacho tus dos mensajes.
EliminarNo 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.
gracias hermano nueva vez...Eres genial!!
ResponderEliminarHola,muchas gracias,esta buenisimo,pero tengo una consulta,como hago para cambiar el color del borde de las imagenes?muchas gracias!
ResponderEliminarme 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!
Eliminarme 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!
EliminarHace 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.
EliminarDe 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.
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...
Eliminarsi 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,
Eliminary no me cambia el color de la foto grande,solo la miniatura
EliminarPero ¿dónde está? Pásame la dirección de la entrada que no tenga que estar buscando.
Eliminarhttp://www.blogger.com/blogger.g?blogID=3666872131000971759#templatehtml , no se como enviartela por privado...
ResponderEliminarTienes 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.
EliminarMe gusta el ultimo, pero como pongo las imagenes.
ResponderEliminarHola. 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.
EliminarHola 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í:
ResponderEliminar< 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
Sobre sliders creo que sólo he publicado este, pero no dispone de pase manual.
EliminarGracias 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 :)
ResponderEliminarMe respondo: No se si sea la mejor alternativa pero lo resolvi con un "padding". Saludos!
EliminarSi te funcionó, seguro que era una alternativa ;)
EliminarPor favor me puedes decir como le coloco pie de pagina o una leyenda a las imagenes que no sea con "alt" ?
ResponderEliminarEs una "sencilla" galería, Yeisi. No es fácil insertarle esos rótulos.
EliminarBuenass. Habría alguna opción de poner solamente esta galería dentro de una entrada de blogger?
ResponderEliminarHola 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.
ResponderEliminarHola 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:
ResponderEliminarhttp://joyeriavlynder.com/aderezos.html
la verdad la necesito igual.
de antemano agradezco toda la colaboración,
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.
EliminarEy!!! muchas gracias por tu ayuda, inmediatamente me pongo a trastear con esto y te cuento
EliminarEsta Genial pero me gustaria mas que las imagenes fueran cambiando automaticamente
ResponderEliminarpor ejemplo luego de 5 segundos cambiara a la imagen siguiente :D pero aun asi esta muy bueno Muchas Gracias
man, una pregunta, como podría hacer para cambiar de imagen con una "fechas"???
ResponderEliminarEntiendo 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!!!
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.
ResponderEliminarSe trata de un gadget estático, si lo que queréis es un slider, echad un vistazo a este otro post ;)
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.
ResponderEliminarEntonces 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.
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.
EliminarCon 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.
Hola!
ResponderEliminarEstoy 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?
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.
EliminarPara lo que tú quieres tendrás que usar otro sistema en lugar de este.
Wedding Dance, acabo de publicar un nuevo post con otro sistema que creo te interesará ;)
Eliminaren donde lo publico
Eliminaren donde lo publico
Eliminarhola 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
ResponderEliminarHola Roci MIn. En este enlace tienes la otra galería que indiqué. Está con el formato que entendí que quieres.
Eliminar