Galería CSS de imágenes con miniaturas | Oloblogger Esto no es un slider o visor automático de esos que tan de moda están últimamente. Se trata de algo ...

6 de junio de 2012

Galería CSS de imágenes con miniaturas

Esto no es un slider o visor automático de esos que tan de moda están últimamente. Se trata de algo más sencillo pero que nos permite mostrar igualmente una serie de imágenes dentro del mismo espacio.

Creo que es especialmente útil para blogs que muestran con frecuencia series de imágenes en sus entradas, pero también podría servir a aquellos que puntualmente necesitan un gadget de este tipo. Además, a las imágenes se les puede incorporar unos textos e incluso un enlace sin ninguna complicación.

Al igual que vimos en una entrada anterior, en la parte superior del bloque aparecerán unas miniaturas y pasando sobre ellas se verán agrandadas en la parte inferior. La diferencia es que en aquella usábamos clic como medio para mostrar la imagen completa y JavaScript como soporte. En esta usaremos hover y sólo CSS.

El resultado será el que sigue:




La idea la vi en Design Shack, aunque me he permitido realizar bastantes modificaciones. La principal está en las imágenes a utilizar, ya que aprovechando las particularidades del almacenaje de imágenes en Blogger (Picasa), en lugar de crear una miniatura a partir de la imagen original, simplemente he utilizado la misma pero con el sufijo -c.

Esto nos permite obtener precisamente una porción cuadrada de la imagen principal sin necesidad de tener que editar y luego alojar un segundo fichero. Lo veremos en la parte HTML porque ahora comenzamos con el estilo.

En esa parte (estilo, CSS, entre las etiquetas SKIN) tendremos que insertar este código:

/* Contenedor general del visor */
.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%; /* 100/nºimágenes, 5 en el ejemplo */
margin:1px;
border: 3px solid black;
opacity: 1;
}
/* Estilo imagen principal */
.grande {
width:100%;
position: absolute;
top: 800px; /* Valor mayor que alto contenedor para ocultar todas las imágenes */
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
/* Relleno inicial del espacio para imagen principal */
.muestra {
opacity: .3;
width: 200%;
top: 170px;
}
/* Marcamos con un borde la miniatura seleccionada */
a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}
/* Movemos con transición la imagen seleccionada a la zona visible */
a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}

Como veis el sistema es bastante sencillo:

  • Se reserva espacio para el visor y las imágenes originales (grande) se desplazan fuera de él mediante un posicionamiento absoluto y un top mayor que el disponible.
  • El overflow: hidden hará que estas no se vean hasta que se haga hover sobre el enlace, momento en el que el top se modifica a un valor más pequeño para que quede dentro del espacio reservado para el visor.
  • Las miniaturas que realmente son una segunda imagen quedan todo el rato arriba de manera estática y sólo son alteradas un poco en cuanto a estilo para distinguir la activa, cuando hacemos hover.
  • Ambas imágenes se insertarán dentro de un mismo enlace para que miniatura y original estén "conectadas", de manera que al pasar el puntero por una se modifique automáticamente la otra. En este ejemplo el enlace lo hemos dejado vacío (javascript:void(0);)pero se puede utilizar si lo necesitáis.


El HTML, como he anticipado, consiste en enlaces sucesivos con dos imágenes interiores; por un lado la más grande y por otro la miniatura. Y todo ello dentro de un contenedor general. Al final se añade un enlace-imagen adicional para rellenar el fondo y que no se vea en blanco cuando no pinchamos ninguna miniatura:

<div class="contenedorvisor">

<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN1" />
<img class="grande" src="URL_IMAGEN_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN2" />
<img class="grande" src="URL_IMAGEN_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN3" />
<img class="grande" src="URL_IMAGEN_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN4" />
<img class="grande" src="URL_IMAGEN_ORIG4" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGEN_MIN5" />
<img class="grande" src="URL_IMAGEN_ORIG5" />
</a>

<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGEN_ORIG1" />
</a>

</div>

El truquillo para Blogger sería utilizar la misma dirección en ambos casos pero con un pequeño cambio que nos facilitará la porción cuadrada que nos servirá de miniatura.

De esta manera, siendo la dirección para la imagen original (URL_IMAGEN_ORIGX)...

https://lh4.googleusercontent.com/AAAAAAAACiw/X6gtnDtBrmY/s800/Fish.jpg

...tendríamos que añadirle un -c al subdirectorio que representa el tamaño de la anterior para obtener la dirección de la miniatura (URL_IMAGEN_MINX):

https://lh4.googleusercontent.com/AAAAAAAACiw/X6gtnDtBrmY/s800-c/Fish.jpg


Habréis observado que el último enlace es una única imagen que además repite la dirección de la primera. Realmente podéis usar la que queráis o incluso un fondo plano, pues sólo sirve para marcar la zona dónde se irán viendo las imágenes. Con el CSS lo único que hemos hecho en esta parte es darle transparencia y agrandar la imagen para que no sea exactamente la misma, simulando ser un fondo sin relevancia. Mera decoración.

Para los curiosos, en esta demo se puede ver cómo añadir además unos rótulos mediante la inclusion de un span adicional en el interior del enlace. Si queréis hacer cambios, por ejemplo con los tamaños, ahí mismo podéis probarlos.

¿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

84 comentarios :

  1. Genial Oloman, uno siempre mas, pero nada mas por curiosidad como sería con vídeos? es que precisamente estoy buscando una manera de presentar vídeos muy similar a esta galería.

    ResponderEliminar
    Respuestas
    1. Para vídeos pienso que no lo podrías hace con CSS pero en esta entrada de Vagabundia se desarrolla un método que te podría servir.

      Eliminar
  2. Hola..!! soy principiante El css es el que se encuentra en Plantilla-personalizar-avanzado y añadir css..y lo de html es es que se encuentra en la parte de nueva entrada?
    Si es ese??? por que si es asi lo hice y no me sale como a ti.. le puse tambien El "C" antes y me sale una imágen enorme..!! y si no me podrias dar un link de que es exactamente?? :) ojalá e puedas ayudar quiero aprender hacer este tipo de imágen se ve fenomenal

    ResponderEliminar
    Respuestas
    1. El CSS en las plantillas del nuevo diseñador lo puedes añadir como dices, pero yo lo suelo incluir directamente en la plantilla, entre las etiquetas SKIN. No sé si habrá diferencias porque no uso tu sistema. Sin embargo, lo de la imagen enorme no debería ser en cualquier caso. Si lo pones en algún sitio y me pasas la dirección para que lo pueda ver...

      Eliminar
    2. claro te dejo el enlace de mi blog de prueba y veras que es un relajo lo que me hizo ojalá me puedas ayudar..http://faktoranimado.blogspot.com sólo que no sé cómo hacer que lo veas pues no encontré tu correo :/

      Eliminar
    3. Pues ábrelo unos días si no te importa, que prefiero no ir publicando mi correo.

      Eliminar
  3. Funciona perfecto Olo, me encanta, gracias, buen finde :)

    ResponderEliminar
  4. Hola Oloman a mi aparecen las imágenes pero en vertical y con mucha separación, hay alguna manera de corregir esto, gracias.

    ResponderEliminar
    Respuestas
    1. ¿Una dirección para verlo funcionando?

      Eliminar
  5. Hola, perdona que abuse de ti, pero andaba buscando algo parecido a esto para mi blog, pero con la idea de que las imagenes se enlazaran con cada post del blog. Así, la página de inicio del blog sería esa galería con un enlace a cada post. No necesitaría el visor inferior para agrandar las imágenes. ¿Cómo podría adaptarlo?

    ResponderEliminar
    Respuestas
    1. Eso que quieres es un slider para entradas recientes. Yo no tengo publicado ninguno, pero una búsqueda añadiendo la palabra "Blogger", seguro que te dará un buen resultado.

      Eliminar
  6. Sí, sí, al final lo he encontrad, es que hacía mal la búsqueda. ¡Muchas gracias!

    ResponderEliminar
  7. Buenas Oloman.
    Yo ando buscando parte de este truco, para aplicarlo a otras cosas.
    He observado que las miniaturas, son capturas de la imagen pero proporcionadas al contenedor, no deformadas como habia visto hasta ahora.
    La cosa es, si se puede añadir algo asi en las entradas resumidas, ese que tienes aqui publicado de etiquetas "data", para obtener capturas de la miniatura sin que se desproporcione.
    Saludos

    ResponderEliminar
    Respuestas
    1. He publicado algunos posts con diferentes sistemas para hacer algo como lo quieres. Un truco es agrandar las miniaturas con un script. Otro sería mostrarla como fondo con un display:overflow. Eso último no era el motivo principal de esta entrada, pero sí que lo usé allí.

      Echa un vistazo a los enlaces y en el que te parezca más adecuado comentas si tienes problemas.

      Eliminar
  8. Buenas noches, quisiera saber como puedo hacer para poner las imágenes una al lado de la otra ya que me aparecen una debajo de la otra.

    Gracias por el aporte :)

    ResponderEliminar
    Respuestas
    1. No puedo ver tu web en tu perfil, pero si copias este código sin modificaciones, te debería salir igual que lo ves aquí.

      Eliminar
  9. hola, soy maria, pude armar la galeria con las miniaturas pero no se ven las fotos, aparece solo el diseño http://www.tortas-olivia.com.ar/p/galeria.html no sé que error estoy cometiendo. agradezco tu ayuda

    ResponderEliminar
    Respuestas
    1. El mismo que en la otra consulta que me dejaste sobre otro tipo de galería, en otro post: la dirección de la imagen que utilizas es incorrecta ;)

      Eliminar
  10. Hola, excelente tutorial pero tengo una duda: Se puede insertar un texto acerca de cada imagen, ejemplo, Selecciono una imagen, en la parte superior sale un texto. Gracias :)

    ResponderEliminar
  11. muy bonito la verdad yo tengo algo parecido pero de javascrip imagenes en movimiento y la verdad este tb me gusta es parecido te doy un 9 gracias amigo

    ResponderEliminar
  12. perdona que te moleste caballero no se puede ver mas pequeño ??

    ResponderEliminar
    Respuestas
    1. La verdad es que nunca he publicado ningún slider basado en JavaScript, pero cualquier día lo haré.

      Sobre este y su tamaño, sólo tienes que ir retocando los anchos para ajustarlo todo a las medidas que desees.

      Eliminar
  13. Muchas gracias por el tutorial, me funciono muy bien, ahora tengo una pregunta, ¿Como haria para que la imagen quedara fija? es decir que al hacer click en la miniatura la imagen grande quedara fija hasta que se haga click en otra miniatura.... Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Es CSS y por lo que yo se sólo podemos manejar el hover, o sea, la acción de poner el puntero encima de la imagen. Creo que no es posible hacerlo con el clic. Para eso habría que utilizar otras galerías basadas en JavaScript.

      Eliminar
  14. Hola, actualmente estoy creándome un blog de artesanía, y me gustaría poder hacer algo así: http://cssheaveni.blogspot.com.es/, es decir, que las entradas se puedan ver cómo una viñeta de cómic. Sé que con las nuevas plantillas de blogger puede hacerse, pero a parte de que no me gusta que el visitante pueda cambiar el diseño de esta por el menú ése que sale, tiene muy pocas posibilidades de diseño...
    ¡Espero que puedas ayudarme!

    ResponderEliminar
    Respuestas
    1. Aqui van un para de enlaces con otros tantos sistemas para hacer algo cómo eso. Una es más antiguo y otro más moderno, pero los códigos no suelen caducar ;)

      http://www.oloblogger.com/2010/10/sumarios-automaticos-casi-definitivo.html
      http://www.oloblogger.com/2009/03/estilo-revista-magazine-simplificado.html

      Eliminar
  15. Hola Oloman, excelente blog, el problema q se presenta es q al colocarlas en una entrada las miniaturas aparecen en vertical.

    La otra consulta es como hacer para q las miniaturas estén debajo y no arriba.

    Y otra -perdón por utilizar tu tiempo-, es de q modo incluir alguna leyenda en cada imagen.

    Un enorme abrazo desde Uruguay

    ResponderEliminar
    Respuestas
    1. Hola. En las entradas siempre es complicado meter código, porque cualquier salto de línea se interpreta y te va descolocando las cosas. Aunque yo lo puse aquí con esos saltos, en la entrada tienes que meter todo el código seguido.

      En la parte CSS no hace falta, pero si antes o después de las etiquetas STYLE.

      Para lo de las leyendas tengo que remitirte a este otro sistema, pues la verdad es que tanto uno como otro son casi de exhibición y en cuanto se toca algo se descuadran otras cosas.

      A ver si hay suerte y el que te enlacé ahora se adapta a lo que quieres.

      Eliminar
  16. Buenas tengo un problema, cuando utilizo el navegador Crome me funciona perfectamente, pero con cualquier otro navegador me da problemas y me aparecen las imagenes una encima de la otra... Gracias por el aporte!!

    ResponderEliminar
    Respuestas
    1. ¿En cualquier otro navegador o en IE7 precisamente? Lo probé en Chrome, Firefox e IE8-IE9 y en todos ellos se veía bien.

      Si no es eso y pusiste el HTML en una entrada/página, entonces prueba a poner todo eso (HTML) sin saltos de línea, todo seguido.

      Eliminar
  17. Hola Oloman Excelente todo este material, gracias por compartirlo.
    Una pregunta:
    En el ejemplo que publicaste no varian las dimensiones de las miniaturas, ni de la imagen grande cuando cambias de definición.
    Te queria consultar como corregir el cambio en la dimensión de la foto principal (grande) cuando tenes diferentes definiciones de pantalla.-
    Saludos

    ResponderEliminar
    Respuestas
    1. No. Esta galería no es adaptable, elástica, responsive o como prefieras llamarle. No tengo ninguna publicada, pero no sé si te servirá un slider: Enlace

      Eliminar
  18. Hola Oloman muchas gracias funciono bien el único problema que poseo es que no se como colocar las imágenes para que aparezcan una al lado de la otra como en el ejemplo que colocaste

    gracias y un saludo

    ResponderEliminar
    Respuestas
    1. Hola. Si lo estás poniendo en una entrada o en una página (no en un gadget), tienes que evitar dejar saltos de línea. El código HTML debe ir ahí todo seguido.

      Eliminar
    2. no se si sera mucha molestia pero no e podido cuadrar donde aparece la imagen grande por que siempre esta desorganizada http://carrosnuevoscol.blogspot.com/p/blog-page_8797.html
      mira esa es la dirección de donde tengo las imagenes y como aparecen o no se si sera mejor un Slider.
      muchas gracias

      Eliminar
    3. Ahora si vi el problema. Es el estilo de las plantillas dinámicas que se solapa sobre el de la galería. Habría que añadir al menos un important! para que se respetara el estilo de este visor.

      Para que se sitúe todo bien hay que añadirlo en este display:block :
      .grande {
      width: 100%;
      position: absolute;
      top: 800px;
      margin: 0 auto;
      text-align: center;
      display: block !important;
      ...

      Eliminar
    4. Muchas gracias me sirvió muy bien

      Eliminar
  19. Este es el que empeze a usar,me parecio mas facil de manejar los script,pero tengo una duda,hay una foto que tiene diferente tamaño al resto,yo puedo poner algun codigo para que cuando solamente se muestre esa foto en grande (no miniatura) se vea en su tamaño real?,a pesar de que es distinto al tamaño de las fotos de los costados?gracias!

    ResponderEliminar
  20. http://www.blogger.com/blogger.g?blogID=3666872131000971759#templatehtml

    ResponderEliminar
  21. Ya aprendi a hacerlo, tuve que crear un nuevo img class y un nuevo hover y asignarselo particularmente a esa imagen, gracias igual!

    ResponderEliminar
    Respuestas
    1. Una consulta, o tenes un post que explique como enumerar las paginas?porque no consigo por ningun lado alguno que ande...:S. muchas gracias!

      Eliminar
    2. ¿A qué tipo de páginas te refieres? Puede haber páginas para comentarios (cuando pasan de los 200 por post), paginación de entradas, páginas estáticas... Sólo he publicado sobre las de entradas.

      Eliminar
  22. Hola!!, muchas gracias por tu post!!, tengo una duda, ¿habría alguna posibilidad de que la imagen se hiciera grande al darle click a la miniatura en vez de al pasar el puntero por ellas??
    gracias de antemano =)

    ResponderEliminar
    Respuestas
    1. No es fácil con CSS y habría que añadir ID's a cada enlace. En la segunda parte de este post (en inglés) tienes explicado cómo hacerlo.

      Eliminar
  23. Hola! Te agradezco por este post.

    Al parecer, para que sea funcional, las imgs deben ser en este caso de 800x535, pero buscaré la forma de adaptarlo con imgs de otros tamaños; apreciaría si, por favor, me ayudas.

    ...Nuevamente, Gracias!

    ResponderEliminar
    Respuestas
    1. Si te da igual que las miniaturas estén en un lado en vez de en la parte superior, este otro sistema está más explidado y además es adaptable a cualquier tamaño.

      Eliminar
    2. Feliz noche, Oloman! Te agradezco por tomarte el tiempo de responderme y brindarme tu invaluable ayuda. Seguí tu recomendación y logré hacer un buen trabajo. ...Que la vida te sonría siempre!

      Eliminar
  24. primer que todo un gusto saludarte y felicitarte y agradecerte por el blogger eh aprendido y sacado artos modelos para la creacion de paginas.
    tengo una consulta sobre este css. ¿como puedo hacer que al momento de pocisionarme sobre la imagen y aparesca la extencion la imagen salga de los costado o de arriba???

    de antemano muchas gracias

    ResponderEliminar
  25. El TOP que hay en el selector .grande y el que hay en el a:hover .grande, son los que recrean ese efecto de sube-baja. Eliminando ambos y sustituyéndolos por sendos BOTTOM, LEFT o RIGHT (dependiendo de la dirección y sentido que quieras), conseguirás eso.

    ResponderEliminar
  26. Hola Oloman! qué tal estás?
    antes de preguntarte decirte que soy consciente de que tal vez mi consulta no vaya en esata entrada...pero hijo, no acabo de encontrar lo que quiero. No sé si no pongo la pregunta adecuada en google o qué, pero no lo encuentro.
    Exactamente quiero esto que se ve abajo del todo en los footers...una galería de imágenes en plan fotito pequeña y que al poner el cursor encima se lea el título de la receta..
    He buscado en tu blog, en el del Potro, en el de la Karla Casteñeda, en Inicia blog....y lo que encuentro son tuneos de Entradas populares, LINKWITHIN perosnalizados, sliders de imágenes....y no sé cuantas cosas más....
    Y chico...tengo la cabeza como un bombo.....
    Manualmente sabría cómo hacerlo, uno a uno y editando el gadget cada vez que hiciera una receta (voy a crear un nuevo blog, de recetas, de momento para uso propio, después ya veremos) pero creo que es más sencillo que lo que yo sabría hacer.
    Le he preguntado a la chica esta que lo tiene así. Le dije que me enviara el código que tiene en ese gadget titulado "AHI TIENES MAS , PINCHA ENCIMA Y LA VERAS"...pero he intentado entenderlo y no hay manera. Aunque lo tunee, colocando mi link, no me sale nada.
    Por otra parte me consta que ella no tiene idea de nada de esto. Me dice que ella publica su receta y la imagen se le coloca ahí solita,(por lo visto el blog se lo hicieron) por lo que me imagino que debe de tener un código en la plantilla que debe de dar una orden o lo que sea.
    Si no supieras exactamente, a ver si me pudieras indicar algo parecido. No hay prisas, de momento no me corto las venas ☻ pero es que ya no sé por dónde mirar.....
    Por aquí me espero a ver qué se te ocurre
    Un beso

    ResponderEliminar
    Respuestas
    1. Hola Manolo, sigo en mi búsqueda pero no hay manera. entre otros parecidos, he encontrado éste del Balcón de Jaime. Me he metido el script ese tal como indica y después en un gadget de HTLM el código que dice para la galería de imágenes, arreglándolo al tamaño de imagen que yo quiero. Bien. Me funciona cuando hago la prueba y meto como 5 ó 6 imágenes. Ahi se me ven todas juntitas una al lado de las otras y redirigidas y con su titulito en cuanto pongo el cursor. El problema me viene, eso con todos los que he probado en plan manual, con y sin código script dentro de la plantilla, es que en cuanto vuelvo a editar el gadget para añadir otra imagen.....se me espendolan todos y me salen en vertical, cuando en realidad por lo menos 7 u 8 imágenes me cabrían en una sola fila.
      Si no encuentro nada que me lo haga automáticamente (como se lo hace a mi amiga) no me importa hacerlo manual....pero si cada vez que edito el gadget se me colocan a lo guerreros de Siam, como que me toca las narices.....
      Yo seguiré buscando (por haoy ya he tenido suficiente) pero así como quién no quiere la cosa....a ver si tú me iluminas de alguna manera ☺
      Besos

      Eliminar
    2. Como ando fatal de tiempo, te pongo sólo un copia-pega (gadget HTML/JavaScript):

      <div id='bp_recent'></div> <script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script> <script style='text/javascript'> var numberOfPosts = 42; var showPostDate = false; var showSummary = false; var titleLength = 0; var showCommentCount = false; var showThumbs = true; var showNoImage = true; var imgDim = 70; var imgFloat = 'left'; var myMargin = 3; var mediaThumbsOnly = true; var showReadMore = false; </script> <script src='http://musicaememorandum.blogspot.com/feeds/posts/summary?max-results=100&orderby=published&amp;alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

      Ya configuras tú el resto que te haga falta y sobre todo, aloja el script bajo tu control.

      Eliminar
    3. Mil gracias.
      Hasta ahora voy editando el gadget y añadiendo.
      En cuanto eche mano a éste que me das, te digo algo.
      Muchísimas gracias por tu respuesta
      Un abrazo Oloman

      Eliminar
    4. Vale, funciona a las mil maravillas!!!!
      Además me acabo de enterar, que para que funcionase tenía que hacerlo público ☺ por lo de los feeds, que me sonaban pero no tenía ni idea de qué eran....una consulta a don google y aclarado.

      Solo una cosita....es posible cambiar el tamaño de la imagen? porque no veo dónde pudiera hacerlo (en cuanto veo un Height o un width ahí voy yo a echarle mano). Me gustaría el height de 100 y el width de 125, me cabrían 6 imágenes menos pero me gusta más. Por si se pudiera hacer, a ver dónde tengo que meter la orden ☻

      Pero mira, no me va la vida en ello. Tú a lo tuyo que no tengo prisa para que me respondas. Estamos en verano y medio en vacaciones, y eso es sagrado, vale? faltaría más!!!

      Mil no, DOS MIL gracias y un abrazo grandote.
      Y por si las moscas....BUEN VERANO!!!


      Eliminar
    5. No lo he visto funcionando, pero si son de 70px, eso se debe regular en var imgDim = 70;

      Eliminar
  27. Ok, cambiando el 70 por el 110 consigo la anchura que quiero. Pero habría alguna manera de controlar la altura? porque todas las imágenes me salen cuadradas y me gustaría controlar el ancho para verlas cómo yo quiero, rectangulares.
    Mira, antes de preguntarte esto de ahora, lo he mirado por la web en todo lo que he sido capaz de entender y probar, que tampoco quiero ser pesada. De verdad.
    A ver si lo sabes. O tal vez no se pueda ¿?

    ResponderEliminar
    Respuestas
    1. ¿Dónde lo tienes puesto Andaira? Es que necesito verlo para ver si se puede cambiar con CSS y así no tener que cambiar el script que sería la primera opción.

      Eliminar
    2. Vale Manolo, perdona hijo por tantas molestias.
      Lo acabo de hacer público para que lo veas. Bueno ya sabes, clica en el perfil que te lleva directo

      Eliminar
    3. Si te refieres a lo que tienes en "MIs recetas en un solo clic", en el contenido de esa página puedes añadir esto para regular el ancho y alto final:
      <style>
      .post-body a img {
      width: 150px !important;
      height: 120px !important;
      }
      </style>

      Eliminar
  28. Ainsss que no quiero que te lies. Ana soy yo

    ResponderEliminar
  29. Ya Oloman, no es esa pestaña. Es respecto al código script que me diste aquí arriba. Son las imágenes pequeñas que están abajo del todo, en los footers del blog. Logré definir el ancho gracias a que me dijiste que tocara el " var imgDim = " , pero no soy capaz de gestionar la altura (queves lo que quiero variar) porque no sé qué tengo que añadir (o si se puede ¿?).
    Este que me dices sí que se tocarlo porque lo coloco yo uno a uno. El codigo que tú me diste, se coloca la imagen solita ahí, yo no tengo que estar editando y colocando.

    Pd. La verdad es que me sabe fatal la lata ésta que te estoy dando. Porque igual no puede hacerse

    Saludos

    ResponderEliminar
    Respuestas
    1. Es que antes cuando lo vi, no salía el gadget allí abajo. Para las imágenes del script, este sería el CSS:
      .bp_item_thumb img {
      width: 200px !important;
      height: 100px !important;
      }

      De todas formas, el script obtiene una imagen cuadrada de las del feed, así que eso anterior las deformaría. Para hacerlas rectangulares habría que modificar el JS y eso ya es algo más largo.

      Eliminar
    2. Perdona...soy yo de nuevo...perdón, perdón!....

      Que mira, que estoy probando de que esas imágenes que salen abajo del todo, gracias al código que me diste, se abran en otra pestaña. He probado a meter lo del "target="_blank"(que rebuscando me he enterado que es lo que lo hace posible), pero he ido probando, y metiéndolo en varios sitios (entre el código) y no me sale. Es posible hacer que esa imagen abra la página en otra pestaña?

      pd. no sé si me explico :(

      Eliminar
    3. Te explicas, pero no puedes añadir ese target="_blank" si no es modificando el script... y en eso ya te digo que no nos vamos a meter ;)

      Eliminar
    4. Así lo probé de meter entremedias de todo lo que pude y no hacia nada.....
      Vale, pues GRACIAS por todo y perdona las molestias.
      Asunto cerrado.
      BUEN VERANO
      Bss

      Eliminar
    5. OK, pero no sé por qué, pero no te creo con eso del "asunto cerrado" XD

      Eliminar
    6. jajajajajaja..... que sí, que sí jajajajajaja
      Además en cuanto acaben 'las noticias' me echo la siesta :-) jajaja

      Eliminar
  30. Uf ! Que rapidez ! No me lo esperaba....
    Vale, en cuanto esté en casa lo pruebo. Aunque ya veo que me dices lo de la imagen seguiría cuadrada.

    Y te puedes imaginar que lo del Js me viene grande porque no sé ni qué es (me puedo imaginar:-)

    Probaré eso en la CSS y sino, ya lo dejo estar

    Muchísimas GRACIAS y discúlpame las molestias

    ResponderEliminar
    Respuestas
    1. Sí, funciona!!!!
      Lo he dejado lo menos cuadradas que he podido sin que saliera deformada.
      MUCHÍSIMAS GRACIAS y de nuevo, perdona la lata que te he dado
      BUEN VERANO!!!!
      Un abrazo

      Eliminar
  31. Buenas noches.

    La verdad es que es una preciosidad el formato de la galería, pero me está trayendo de cabeza implementarla en una página. Copiando tal cual el HTML de la demo (y borrando los saltos, como recomiendas a otros blogueros), me aparecen las imágenes grandes y en vertical, una detrás de otra: http://cvbiedma.blogspot.com.es/p/galeria-de-prueba.html

    Llevo ya unas cuantas horas con el asunto y la verdad es que no sé cómo hacer. ¿Podrías iluminarme un poco?

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Nacho. Sospecho que el problema proviene de que usas una plantilla de las Dinámicas y esas apenas si permiten personalización.

      He estado viendo esa página que me indicaste y aunque el HTML es el correcto, no aparece por ninguna parte el CSS que haría que eso funcionar. Si es que no lo incluiste en tu plantilla, hazlo y si en realidad lo tienes entonces es que Blogger lo obvia en tu tip de plantilla.

      Eliminar
    2. Me parece que tienes toda la razón en lo del CSS. En un principio, parece que se ha resuelto el problema.

      Mil gracias, de verdad. Un saludo.

      Eliminar
    3. ¿Razón en que las dinámicas no admiten modificaciones CSS de esa índole o razón en que no pusiste el CSS? Es para saberlo...

      Eliminar
  32. Lo segundo. Copiado el CSS en el módulo de personalización (Plantilla/Personalizar/Avanzado), parece ir como la seda. De todos modos, mañana lo comprobaré en serio, así que si tengo algún problema te lo haré saber.

    Gracias de nuevo.

    ResponderEliminar
  33. Bueno hijo, lo sé, pero es que después de mucho mirar por ahí (pa’no molestarte a la primera de cambio) y no encontrar nada que me aclare, a ver si tú me puedes decir, ya que gracias a ti tuve este script (uf! qué manera de hablar con propiedad)

    En COMENTARIOS de esta entrada, me diste un código para que me saliera automáticamente la primera fotito de cada entrada. Lo puedes ver funcionando
    aquí.

    El script que me enviaste era el que tienes más arriba en estos comentarios (lo siento pero no me deja reproducirlo)
    Con tu ayuda lo modifique para dejar los cuadritos de las imágenes a mi gusto (modifiqué el “ var imgDim = 70;” en el que cambié el 70 por el nº 120 y poder ver las imágenes más grandes y modifiqué sobre todo la cantidad de imágenes que se tenían que ver “numberOfPosts = 42;” el 42 lo cambié por 1000 y cambié también el “…..summary?max-results=100….” que también puse el nº 1000

    El script funciona divinamente, pero hace tiempo que me he dado cuenta de que se me ha parado en 150 imágenes y cuando publico nueva receta, me sale la imagen de esa misma y se me “borra” la del final.

    ATENCIÓN!!!! que viene la pregunta ☻qué puedo hacer para que me salgan las de todas las entradas?. Tengo 286, por lo tanto deberían de salir 286 imágenes y no las 150 que aparecen. O eso no es posible?

    Como siempre, no hay prisa, cuando puedas contestarme, porque ya hacía tiempo que no te molestaba a preguntas y ahora ya te ataco por dos bandos ☺ (y es que aquí el Lobatón no tiene ná que hacer ☻)

    Un abrazo

    ResponderEliminar
    Respuestas
    1. Hasta hace muy poco se podían configurar hasta un máximo de 500 posts al cargar desde feed. Hoy día són sólo 150, que son justo los que te salen.
      Supongo que duplicando la última línea y cambiando el índice, te saldrán el resto a continuación. Algo así:

      &l;script src='http://musicaememorandum.blogspot.com/feeds/posts/summary?start-index=1;max-results=150&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
      &l;script src='http://musicaememorandum.blogspot.com/feeds/posts/summary?start-index=151;max-results=150&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

      Eliminar
    2. He probado como tú me dices y solo consigo que se me vean en lugar de las últimas 150, las últimas 25 entradas (amos mejorando ☻)y repetidas. O sea, 25 y a continuación las mismas 25.....he probado alguna otra opción (de esas que yo me saco de la manga probando posibilidades ☺) pero no ha mejorado.
      Esta noche me lo volveré a repasar, a ver si es cuestión de algún punto o alguna coma....que nunca se sabe....

      Eliminar
    3. Pues ná Oloman, no hay manera. He probado un montón de posibilidades, duplicando la última linea y jugando con las cifras, →index 1 y max-result=150 y en el siguiente duplicado cambiando el index y el max-result por 151 y 301 respectivamente...no sé cosas que se me han ido ocurriendo.....en el momento en que le coloco el →start-index 1, tan solo se me ven las 25 últimas entradas....

      Así que lo dejo estar.....con que se vean las últimas 150 ya está bien....si el feed lo quiere así, pos pa'él ☻

      No te mareo más.

      Un besazo y por supuesto FELICES FIESTASSSSSS!!!!!

      Eliminar
    4. OK. Veo 150, así que al menos lo lograste ajustar al máximo "normal" que rige actualmente. De todas formas, los feeds tardan mucho en cargar, así que más cantidad y todo de imágenes, no sería tampoco muy bueno.

      Eliminar
    5. ah! pues mejor que no se vean tantas imágenes si va a tardar en cargarse más....150, ya está bien......
      Como siempre, MUCHÍSIMAS GRACIAS, de verdad....
      y por supuesto......FELIZ 2016 (que eso no te lo había dicho jajajajaja)

      Un abrazo!

      Eliminar