Spacegallery: Una galería de imágenes muy diferente

4 de abril de 2011 338 comentarios ,
Hay muchos tipos de galerías para imágenes que nos encontramos en la red, pero pocas veces vemos una que muestre las imágenes de una forma tan diferente como esta.
Los que usan Mac OS X seguramente encontrarán mucha similitud con TimeMachine y los que no de cualquier forma estoy seguro que disfrutarán este tipo de efectos para ver las imágenes.

Se trata de Spacegallery, una galería de imágenes hecha con jQuery en la cual las imágenes aparecen una detrás de la otra al hacer click. Puedes verlo en el ejemplo de abajo.



Para usar esta galería primero descarga este archivo, descomprímelo y sube los tres scripts a un hosting. Luego pega antes de </head> lo siguiente:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo eye.js' type='text/javascript'/>
<script src='URL del archivo utils.js' type='text/javascript'/>
<script src='URL del archivo spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>
Agrega donde se indica la URL de los archivos que subiste previamente, pero es muy importante que los agregues en el orden que se indica, de lo contrario podría no funcionar.

Ahora antes de ]]></b:skin> pega esto:
#myGallery {
width: 100%;
height: 400px; /* Alto de todo el contenedor */
}
#myGallery img {
border: 2px solid #52697E; /* Borde de las imágenes */
}
a.loading {
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TZUg9AbaMDI/AAAAAAAABQQ/fm_HIeX8MPg/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y agrega esto a continuación:
<div class="spacegallery" id="myGallery">
<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

</div>
Ahí pon las URLs de las imágenes de tu galería, tomando en cuenta que la última imagen será la primera que se mostrará.

Y así se sencillo puedes disfrutar de esta galería de imágenes en tu blog, y aunque no tiene opciones de visualización o de configuración es sin duda una galería que llamará la atención de tus lectores.


338 comentarios en:

" Spacegallery: Una galería de imágenes muy diferente "

  1. no pasa nada si tengo otro de estos links

    'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

    ResponderEliminar
  2. Ala! Potro que impresionante, con jQuery... pero está barbaro!! Gracias por enseñarnoslo, un abrazo

    ResponderEliminar
  3. Mira como quedo http://www.lockerzlatinos.com/2011/04/coleccion-de-premios-recibidos-en.html

    quiero saber si no ahi algun error :D saludos

    ResponderEliminar
  4. noto que al poner muchas fotos se queda frenado y toca dar clic para que aparescan

    ResponderEliminar
  5. Dreko, probablemente es porque usas Scriptaculous y no aplicaste el hack para que funcionen juntos.

    MaG@S RaDioMuSiC, gracias a ti por tu visita!

    ResponderEliminar
  6. Ey potro Genialisisisisismo... ese Slider, y como siempre gracias por los tutoriales..........

    ResponderEliminar
  7. Espectacular Potro, como siempre.
    Un saludo.

    ResponderEliminar
  8. hey POTRO y xq no pusistes los scrips ya de una ves!!

    ResponderEliminar
  9. Tengo que probarlo, me encanta!!
    Muchísimas gracias.

    ResponderEliminar
  10. Hola , Te dire que desidi esperar a ver lo que sucede en bloguer . Mientras te comento , que esto de las imagenes superpuestas se ve tan curioso y diferente! antes perdona el desconocimiento, me puedes explicar estos procesos; descompromir, subir los tres scripts a un hosting y pegarlo antes a head , disculpa , ya abes que preguntando es que se aprende! gracias potro , eres muy amable! Rose

    ResponderEliminar
  11. uy s lindo el efecto luego lo intentare gracias x la inf. ^-^

    ResponderEliminar
  12. Hola
    Verdaderamente cuánta información tan útil, no cabe duda, ¡Siempre! aprendemos algo diferente, con la mejor buena fe, ¡Te felicito! que bien esta Ciudad Blogger y cuánto por aprender.

    ResponderEliminar
  13. OOOOOH!! DAMN!! esta reweno bro!! lo aplicare man!!

    una consulta pekeña.... Tu sabes o puedes ayudarme para obtener este menú en jQuery? http://bit.ly/e2P7rm
    Sin la publicidad o algo similar? :$ puede ke sea no muy correcto jejeje pero se vería filete!!

    Saludos Potro! y gracias nuevamente!

    ResponderEliminar
  14. interesante, tengo unas dudas Sr. Potro, veo que el tamaño de las fotos es igual o sea el contenedor, que pasa si mis imágenes no tienen el mismo formato (horizontal o vertical) y no tienen el mismo tamaño?? se autoescalan, se ven centradas en el contenedor?
    saludos y desde ya un gracias.

    ResponderEliminar
  15. @ Potro a k hosting subo los scrips? porfas!! te falto poner donde.... xD

    ResponderEliminar
  16. como que hay algo con los sliders Potro jejeje parece una adiccion, pero la verdad es que este me parece muy bonito y creo que lo utilizare.

    ResponderEliminar
  17. Sergio Molina, qué bueno que te ha gustado tanto como a mí :)

    El abajofirmante, saludos!

    Lupe Bicos, nos cuentas qué tal te fue ;)

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

    ResponderEliminar
  19. rosarod, hay varios tutoriales en la red sobre cómo descomprimir archivos, este es un de ellos que me encontré en YouTube:
    http://www.youtube.com/watch?v=AWW86pHJzKY

    Ya descomprimidos puedes subirlos a Google Sites o en cualquier otro hosting. Ya una vez que subidos entonces consigue la URL de cada archivo (en el enlace se explica cómo se hace) y pega la URL en el código donde se indica.

    Saludos.

    ResponderEliminar
  20. Tal vez @Microboy 90 si miras esta entrada te daras cuenta de los beneficios de Dropbox

    ResponderEliminar
  21. @POTRO: Lo hice ,pero la 1ra imagen me salio hacia la derecha ,no me salio en el centro como el tuyo potro,k fue lo k paso o k le muevo pa que quede la 1ra en el centro, ya que cyuando le doy las otras si me salen en el centrooo////
    no te dejo el link xq es XXX el blog./ pero si cambias de opinion dejame saber o dame un email pa contacto!

    ResponderEliminar
  22. Lady Pink, a ti por tu visita!

    Jose, me incluyo dentro de los que tenemos aun mucho por aprender, pero seguro será más facil si lo hacemos todos juntos :)

    G-NoZiDe, pues sólo con la versión de pago se iría el enlace :P

    ResponderEliminar
  23. Odin KO, ¿verdad que sí? :)

    Mo, se deben centrar si todo sale bien, el ancho del contenedor se ajusta al ancho total del contenedor donde lo tengas, y en el caso de la altura ese sí se establece en donde dice height: 400px;

    ResponderEliminar
  24. Respecto al menu que dice G-NoZiDe yo ya habia encontrado esa pagina y de hecho hice un tutorial para poner el menu ayer, pero no lo probe :P apenas me vengo a enterar que aparece un enlace :O

    ResponderEliminar
  25. Microboy90, no los puse los scripts directo en la plantilla porque dos de ellos sí están algo largos pero igual se pueden poner directo en la plantilla como se ha explicado antes. Y bueno, del hosting pues es que ahí cada quien decide dónde alojarlos ;)

    Si el blog tiene la advertencia de que contiene contenido para adultos no importa, puedes ponerlo aquí para revisar el problema, igual si lo prefieres usa un acortador para 'disfrazar' en enlace :)

    ResponderEliminar
  26. Kron, jajaja, por eso hay que probar todo antes :)
    Fijate que igual me estaba dando cuenta que últimamente son muchos sliders pero la verdad es que es lo que más me han pedido y de hecho la próxima entrada quizá también sea sobre un slider que han pedido, jaja, para que no te aburras :P

    Saludos!

    ResponderEliminar
  27. Orale pss POTRO chido por la info!! pss mira aki te dejo el link pa que lo cheques como quedo
    checalo aki!!,

    Fijate que la 1ra foto quedo muy a la derecha y no me gusta asi,deberia quedar en medio!

    ResponderEliminar
  28. no, no , no si no es estar aburrido XD es que cada vez que veo alguo lo quiero poner en el blog jajajaja, bueno de ahora en adelante tendre que probar todo antes de ponerlo :) saludos y buen blog Potro

    ResponderEliminar
  29. Llevaba días tanteando varios slides para colocar en mi blog, estaba dudando entre usar éste o el de "popeye" y resulta que hoy me llevo la sorpresa de que has puesto el primero. Ahora a ver si un día te animas con el de popeye :D muy vistoso y compacto para sidebars, imagino que ya sabrás de cuál te hablo jeje

    Se sale la galería y se sale el post, muy bueno Potro.

    ResponderEliminar
  30. Hola Microboy90,

    Lo que sucede es que uno de los códigos de imagen no tiene imagen, lo dejaste así:
    <img src="URL de la imagen"/>

    Y mientras haya una imagen que no cargue se pondrá hacia el lado derecho y mostrará el icono de 'cargando'.

    Ponle una imagen o elimina esa línea y verás que se soluciona de inmediato.

    Saludos!

    ResponderEliminar
  31. jajajajaja Yaaaa ok!! Listo...si es cierto quedo un codigo sin url.... pero me acuerdo haberlo eliminado,creo que no la guarde cuando la elimine! Chido POTRO quedo chingon! gracias man..
    Pero otra cosa mira,que no me gusta estas lineas osea los bordes azules que tiene el blog...me podrias decir como kitarlo porfas y ademas el fondo gris que sale en mis imagenes aqui te muestro lo k no me gusta!
    IMAGEN CHECALO GRACIAS!!,

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

    ResponderEliminar
  33. A mi no me va, aparecen imagenes una detras de otra clikeo no me va el orden url archivos es correcto https://sites.google.com/site/victordior/archivos/eye.js
    'https://sites.google.com/site/victordior/archivos/utils.js

    'https://sites.google.com/site/victordior/archivos/spacegallery.js
    upps!!! creo que 1 eye 2 spacegallery 3 utils ?

    ResponderEliminar
  34. clikeo en el tuyo y no va tampoco debe ser problema navegador o actualizar mi java?

    ResponderEliminar
  35. lerh, gracias!

    Joker, amm pues no lo conozco pero este sí que está muy bueno :)

    ResponderEliminar
  36. Microboy90, busca esta parte de tu plantilla y elimina lo que está en negrita:

    .post img, table.tr-caption-container {
    background:none repeat scroll 0 0 #DDDDDD;
    padding:2px;
    }

    Con eso se quitará el color de fondo de las imágenes.
    Y para quitar el borde de los gadgets busca esta parte e igualmente elimina lo que está en negrita:

    .widget-content {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #295ECA;
    padding:5px 10px 10px;
    }

    ResponderEliminar
  37. Victor DIOR, posiblemente sea tu navegador, intenta verlo desde otro navegador para asegurarte que se trata del navegador o de algún otro problema.

    Saludos.

    ResponderEliminar
  38. Potro estoy cambiando mi plantilla por problemas que he tenido que no me permitian meter mas cosas como podria poner un icono en el buscador para mi blog como tenia antes lo hice aqui http://elescaparatederosa.blogspot.com/2010/10/iconj-crear-y-alojar-un-favicon-de.html

    Espero tu ayuda y no dudes este truco estara en el blog de mi Villanueva aunque hayamos descendido

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

    ResponderEliminar
  40. Potro ¿como separo la linea horizontal un poco mas abajo de los anuncios de google adsense?
    http://www.poker-maestro.blogspot.com/

    ResponderEliminar
  41. Javier, mira esta entrada.

    FREDDY, qué bueno que te ha gustado :)

    PokerPRO, pon un <br/> antes de los anuncios.

    ResponderEliminar
  42. oRALE POTRO cHIDO SOLUCIONADO EL PROBLEMA GRACIAS DENUEWVO UN GUSTO CONTAR CON TUS IDEAS!!!

    sorry las mayusculas,no me fije a la hora dee scrobot xD

    ResponderEliminar
  43. Hola potro keria preguntarte algo i nose donde ponerla weno lo que kiero yo es poner algo que me salga con cada entrada que pongo mas o menos como esta imagen con publicidad
    http://www.inkanime.net/2011/04/full-metal-panic-manga-28-espanol.html
    weno eso sali en cada entrada que el sube sali automaticamente
    i la segunda pregunta donde tu tienes en los mensajes (Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.)
    ami me gustaria poner una foto me puedes ayudar porfa ?

    ResponderEliminar
  44. Ok potro ya lo tengo no se que le pasa a mis entradas que no me dejan poner el enlace de los comentarios y etiquetas debajo de la entrada que te parece mi nuevo diseño.

    ResponderEliminar
  45. XikaAnime, mira esta entrada para que veas cómo poner anuncios flotantes en el blog, y esta entrada para ver cómo poner una imagen arriba de los comentarios.

    ResponderEliminar
  46. No me queda más que decir: "Ciudad Blogger es lo más!"

    ResponderEliminar
  47. potro no me has entendedo el de la (y esta entrada para ver cómo poner una imagen arriba de los comentarios.)

    esta bien pero el otro no keria la publicidad flotante si no mira aki
    http://www.inkanime.net/2011/04/naruto-manga-534-espanol.html

    hay una una foto que sali ariba de la foto de naruto que tienes una publicidad aparte de la publicidad flotante pues yo kiero hacer una foto como yo kiero i que salga en todos los post que ponga ok eso lo que kiero

    ResponderEliminar
  48. @ POTRo cambie mi plantilla y para anadir links aki me sale esto kiero anadir pero no se como checate esta imagen plis!!
    http://img861.imageshack.us/img861/2752/unledm.jpg

    ResponderEliminar
  49. XikaAnime, pon la publicidad arriba de <data:post.body/> y saldrá en todas las entradas.

    Microboy90, ese gadget es sólo para mostrar los enlaces de las páginas independientes, al crear más páginas automáticamente se agregan ahí.

    ResponderEliminar
  50. muchas gracias potro eres el mejor

    ResponderEliminar
  51. potro necesito tus habilidades....POR FAVOR NECESITO QUE HAGUES COMO UNA GALERIA DE IMAGENES PERO PARA PUBLICAR MANGAS...ES K SON GRANDES CADA IMAGEN,,UN MODELO K QUEDE LINDO...LO PROBE CON TU SPACEGALLERY PERO NO PARECE TODO EL LARGO DE LA IMAGEN...CREO K SOLO FUNCA CON IMAGENES CUADRADAS...POR FAVOR AYUDAME...Y ES K LO PUSE 100% NI ASI..SALUDOS DE
    BUSCaDiToS

    ResponderEliminar
  52. Hola Potro, parece genial el spacegallery pero algo tengo que estar haciendo mal que no se ve. He generado las URL con dropbox, las primeras las he puesto en orden como dices y las URL de las fotos he probado haciéndolas con dropbox o cogiéndolas de mi propio blog pero nada...¿alguna idea de qué puedo estar haciendo mal? He probado varias veces a ver si es que no había copiado bien todo, no sé qué puede ser!! Ya no sé cómo darte las gracias!!!

    ResponderEliminar
  53. BUsCaDiToS, tanto como que sólo funcione para imágenes cuadradas no es así pues las que tengo de ejemplo son rectangulares y funcionan muy bien. Quizá lo que necesitas es ampliar la altura del contenedor donde se indica.

    ResponderEliminar
  54. Hola Eneri,

    No veo puestas las imágenes en tu blog pero sí veo que has colocado los demás códigos y creo tener una pista por la cual no te puede estar funcionando.
    En el primer código has agregado al principio y al final de ello estos comentarios:
    <!-- spacegallery-->

    El problema es que cuando los estilos están antes de ]]></b:skin> no se deben poner esos comentarios de esa forma. La forma correcta sería así:

    /* Spacegallery */

    De otra forma se invalidad esos estilos y ese pudo ser el problema que tuviste.
    Los comentarios sólo se ponen así:
    <!-- spacegallery-->
    Cuando el código se ha agregado antes de </head> después de <head> o dentro de la estructura de la plantilla.

    ¡Saludos!

    ResponderEliminar
  55. Se puede hacer este montajes de imagenes para las ultimas entradas de nuestro blog?.... es decir, en ves de imganes sea un resumen de las ultimas entradas de nuestro blog del día anterior.....sería fabuloso....!!!

    ResponderEliminar
  56. Sin duda sería fabuloso pero las imágenes se tienen que agregar manualmente :(

    ResponderEliminar
  57. Oye potro consegui esto que puede ser interesante es referente a mi comentario sobre las entredas pero es un gagde muy interesante chequea aqui: http://oloblogger.blogspot.com/2009/09/splush-gadget-para-entradas-recientes.html

    ResponderEliminar
  58. Despues de ingresar los codigos a la edicion html y quererla guardar me dice que no se puede analizar la plantilla y traducido algo asi "La referencia a la entidad "d" debe terminar con el ';' delimitador" y q revise q todo este correctamente cerrado.
    Siento por preguntar tanto, es q quiero aprovechar estas herramientas al maximo.
    GRACIAS POTRO!

    ResponderEliminar
  59. todoberry, se ve bien ese gadget :)


    Dr. draKo, si has revisado el código y todo está bien es posible que se trate de la URL de los archivos que contienen algún caracter no válido, prueba subirlos en otro hosting para ver si te sucede lo mismo.

    ResponderEliminar
  60. dime como sube los 3 archivos que descomprimí a que pagina los subo..
    salu2

    ResponderEliminar
  61. Hay varios sitios donde los puedes subir, uno de ellos es Google Sites.

    ResponderEliminar
  62. Hola potro que bueno que tocastes el tema de Google Sites.... mi preguna es como uso los archivos desde el Google Sites para las plantillas html?, es decir, trate de subir el archivo para la nube de etiquetas pero me costo por el Google Sites, lo hice a travez del dropbox...!!

    ResponderEliminar
  63. Hola todoberry,

    En el comentario anterior al tuyo hay un enlace donde se explica con detenimiento cómo subir archivos ahí y cómo obtener su URL para poder utilizarla.

    ResponderEliminar
  64. Hola Potro!! Si, tenías razón como siempre jeje en que estaba mal puesto lo de , ahora me lo coje, pero no se ve bien, por un lado se queda un reloj pensando, luego se ve sólo una esquina de una foto y una URL escrita en el blog. Tal vez lo haya puesto demasiado grande como para ponerlo en una columna verdad? Las URL que hay que poner son las de mi propia página no? Mil gracias por tu ayuda, como mínimo te voy a tener que dedicar un pastel!! besos

    ResponderEliminar
  65. Usualmente eso sucede cuando una o varias de las imágenes tienen mal la URL de la imagen y por eso no se quita el reloj porque no termina de cargar por completo las imágenes.
    Ahora no lo veo puesto, necesitaría que lo tengas en el blog para poder ver si es por esa razón o por alguna otra.
    En cuanto a las URLs deben ser las URLs de las imágenes que quieres mostrar en la galería.

    Gracias por el pastel, lo esperaré ya que ultimamente me ha dado por comer mucho pastel :)

    ResponderEliminar
  66. Es el navegador explorer en el que no va tendré que actualizarloo dejar de usarlo ? en chrome, el que recomienda blogger, va perfecto la spacegallery, pero ¿qué tamaño de imagen es el adecuado? el grande al subir la foto a bloggger queda desencajado fuera de marco la foto, con el mediano y peueño se ven perfectamente... gracias

    ResponderEliminar
  67. El tamaño de las imágenes ya dependerá de cada quién, sólo verifica que en donde dice:
    height: 400px; /* Alto de todo el contenedor */

    Tengas la altura máxima que tendrán las imágenes, si la imagen más grande que agregues tiene una altura de 800px (por ejemplo) entonces tendrás que cambiar ese 400px por 800px

    ResponderEliminar
  68. Hola Potro:
    Soy nuevo en la plaza y por lo pronto te agradezco lo mucho que aportas. Como se dice cuando se habla en la radio: ¡Enhorabuena por el programa!

    Quiero poner un menú sencillo debajo de mi cabecera. ¿Puedes ayudarme? Mi blogs es:
    http://azahareso.blogspot.com

    ResponderEliminar
  69. Hola Manuel,

    Gracias por tu comentario :)
    En la sección Menús hay varios menús que podrías usar. Para colocarlo debajo de la cabecera sólo es cuestión de que pongas el menú en un elemento HTML/Javascript y luego arrastres el gadget debajo de la cabecera.

    Saludos.

    ResponderEliminar
  70. Hola Potro, tengo un problema con esta garelia, se ve muy bien en chrome, pero no en explorer, ni en firefox, donde no se ve nada. ¿cual es el problema?. Los archivos y las imagenes los subi a dropbox. Gracias por tu ayuda y por el magnifico blog donde nos enseñas a todos.

    ResponderEliminar
  71. Si me dijeras en cuál blog lo has puesto sería de mucha ayuda ;)

    ResponderEliminar
  72. Lo siento, olvide ponerla.
    http://tratos-alquileres-mes.blogspot.com/

    Es para una amiga que trabaja como comercial y como están las cosas aquí en España, con los trabajos, necesita mostrar las imágenes para que los posibles clientes se pongan en contacto. Aun esta en construcción, pero poco apoco...
    Muchas gracias por tu ayuda.

    ResponderEliminar
  73. El problema está en que no has subido los archivos correctamente o no has obtenido bien la URL de cada archivo.
    Recuerda que si los subes a Dropbox los archivos deben estar dentro de la carpeta Public:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    Saludos!

    ResponderEliminar
  74. Hola Potro, otra vez estoy aquí... coloque este gagget, seguí los pasos cuidadosamente, al final las imágenes no se descargaban, en su lugar se veía algo transparente, y al darle clic parecía que iban rodando como en tu ejemplo, solo que las fotos no se llegaron a descargar, le quite la "s" del URL de Picasa a ver, y nada, probé con una foto desde los álbum de Hotmail y tampoco... que abra pasado? al final lo quite porque se veia un espacio alli donde se deberian ver las fotos, quedabe muy feo.. asi que eliminé el gagget, mas lo que coloque en la edicion HTML. lo deje alli...

    ResponderEliminar
  75. Posiblemente sí se trate un problema con las URLs de las imágenes o con alguna de ellas que no cargó bien, pero necesitaría verlo puesto todo completo para poder decirte dónde puede estar el error.

    ResponderEliminar
  76. Buenas tardes!!!


    Estoy probando este gadget y no me funciona. Si puedes mirarlo te lo agradezco.

    Hice lo del hack tal y como comentas más arriba, pero nada. Las imágenes son del flickr, podrá ser por eso y tendré que alojarlas en un hosting. ¿?

    En realidad lo quería poner como una entrada y pasa lo mismo. Te lo dejo en una lado de mi blog (abajo - dcha) y ya me dirás algo cuando puedas.

    Muchas gracias.

    ResponderEliminar
  77. Esta abajo a la dcha. Justo debajo de la lista de seguidores, le puse el nombre del gadget para que lo veas.

    Gracias.

    ResponderEliminar
  78. Hola Luis,

    Lo que sucede es que las URLs que has puesto no son las URLs directas de la imagen sino las URLs de la página que contiene la imagen.
    Por ejemplo, tienes esta:
    http://www.flickr.com/photos/luislorenzogoncalves/5654233404/in/photostream

    Si la abres verás que abre toda la página de Flickr.
    En cambio, si pones esta sí abre sólo la imagen y esa sí te funcionará en la galería:
    http://farm6.static.flickr.com/5150/5654233404_236b1f4d99.jpg

    Saludos.

    ResponderEliminar
  79. Aprovecho para hacerte otra consulta sobre la entrada de spacegalery.
    Spacegallery lo he probado en un blog de prueba y funciona bién, pero en éste blog me inutiliza los botones superiores (Los puse con tu ayuda y les cambié el diseño).
    Para ver el desastre que preparo pincha con el botón que pone (El taller ) y veras que algo hago mal.

    ResponderEliminar
  80. En ese blog no veo que lo tengas, sólo en tallertxolarte.
    Ahí, puede haber dos problemas, uno es que cuando has puesto los estilos de la galería has eliminado una llave de cierre del menú estilo dock. Esta parte la tienes así:
    .dockContainter {
    height: 50px;
    width: 200px;
    left: 500px;
    position: absolute;
    /* comienzo Spacegallery css */

    Y debe ser así:
    .dockContainter {
    height: 50px;
    width: 200px;
    left: 500px;
    position: absolute;
    }
    /* comienzo Spacegallery css */

    El otro problema podría ser de compatibilidad de versiones con jQuery. Prueba eliminando esta línea:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>

    Saludos.

    ResponderEliminar
  81. Hola Potro, necesito saber como hacer esta galeria en mi pagina web, me urge mucho y me encanto esta galeria, muchas gracias por tu ayuda!!

    ResponderEliminar
  82. Poniendo la llave de cierre funciona.
    Pero aunque he probado a eliminar la línea, parece que persiste el conflicto
    Sigo sin ver los tres botones de enlace, de la parte de arriba que son similarares a los del blog txolarteblog

    ResponderEliminar
  83. que onda potro com estamos ,queria ver si me echas la mano con una duda , mira aver si tienes chance de checar esta pagina ...http://muelalab.com/blog/actionscript/mostrar-pantalla-completa ,, quiero ponerle esto ami blog pro la vdd no se como instalarlo , te agradeceria mucho , gracias ibsan photo.

    ResponderEliminar
  84. Daniela Tappatá, nunca lo he probado en una página Web, pero en teoría el procedimiento debe ser el mismo.

    Txolarte, bueno, la galería ya funciona, lo otro no parece ser ya un problema de la galería sino que no has seguido todas las indicaciones de ese menú. Si regresas a la entrada que lo explica verás que dice que en las plantillas que son de Diseñador se deben seguir antes unos pasos, quizá ese es el problema.

    IBSANPHOTO, no sé cómo más ayudarte, todas las indicaciones están explicadas paso a paso en la entrada.

    ResponderEliminar
  85. Definitivamente me doy por vencido.
    He creado un Nuevo blog de prueba y he seguido las indicaciones paso a paso ,con el mismo resultado.
    Las incompatibilidades se dan hasta en las mejores familias.
    Un saludo Potro

    ResponderEliminar
  86. ¡Lo olvidaba!
    También he probado con éste scipt de vagabundia y funcionaba perfectamente pero no lo he utilizado porque me parecía un poco lento

    ResponderEliminar
  87. Hola potro, amigo una pregunta, es posible, colocar esta galeria como entrada en mi blog?

    Estoy tratando de crear entradas de galeria de fotos, pero me gustaria que por ejemplo en la entrada se vea solo una foto y al entrar en ella se vea la galeria completa, no se si me entiendes?

    Podrias decirme o darme un link donde se explique eso? Gracias de ante mano

    ResponderEliminar
  88. Hola Potro gracias por la respuesta, sin embargo y perdona mi ignorancia, los dos ultimos pasos el que dice "Ahora antes de ]]> pega esto:"y el de ir "Diseño | Elementos de la página | Añadir gadget | HTML/Javascript " Eso como lo reemplazo en mi pagina, porque esos elementos los encuentro en mi blog pero en el html de mi pagina. Gracias!

    ResponderEliminar
  89. Txolarte, entonces sí es una incompatibilidad entre ambos scripts, ni hablar... El menú de Vagabundia es buena opción también, no parece muy lento pues se aloja directo en la plantilla, quizá quieras reconsiderarlo.

    Angel Erotico, sólo coloca el último código dentro de la entrada.

    ResponderEliminar
  90. Daniela Tappatá,

    Cuando se trata de una página Web los estilos van en tu archivo .CSS, o sino después de <head> entre:
    <style> y </style>

    Lo otro iría en el cuerpo de la página, o sea después de <body>

    ResponderEliminar
  91. mil gracias portro voy a probar y te digo si me salio!!!

    ResponderEliminar
  92. ok , bueno lo que pasa es que no entiendo en donde tengo que pegar el codigo o cual es la linea de tiempo ,porque se que tiene expicacion ahi , pero no entiendo la explicacion

    ResponderEliminar
  93. Si usas un blog de Blogger entonces ahí en la entrada dice dónde debe pegarse cada código.
    Primero trata de hacerlo siguiendo los pasos que se explican, si te trabas en algo me dices en qué parte ya no puedes avanzar.

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

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

    ResponderEliminar
  96. Excelente potro me quedo muy bien, lo unico malo es que no quedo 100% centrada en la entrada, ya modifique el diametro en el diseño de las entradas, pero aun asi no queda 100% centrada, igual la dejare porque es solo un poco lo que sobre sale, muchas gracias

    ResponderEliminar
  97. Modifica donde dice /* Alto de todo el contenedor */ eso hará que se reduzca la galería, aunque ciertamente no es mucho lo que se sale ;)

    ResponderEliminar
  98. Excelente potro, muchas gracias al final ya me funciona.

    Pero una última pregunta sobre este tema, he comprobado que con el explorer no me funciona y si con el firefox. Se puede arreglar eso de alguna manera.¿?

    Y por último si pones imágenes horizontales con verticales, estas últimas no salen muy bien paradas. No hay arreglo verdad??

    Gracias por todo.

    ResponderEliminar
  99. Hola Luis,

    Lo de IE parece que no tiene arreglo, es una incompatibilidad que tiene.
    Respecto a lo otro no sabría decirte, sólo una vez probé intercalando verticales y horizontales y se mostraron sin problemas, quizá sólo sea cuestión de ajustar el /* Alto de todo el contenedor */

    ResponderEliminar
  100. Hola Potro,

    Gracias por todo, pero por alguna extraña razón no me funciona esto ni en el firefox cuando ayer funcionaba de maravilla..... no toque absolutamente nada y no hice cambio alguno hasta la fecha...¿? Help...

    ResponderEliminar
  101. Hola Luis,

    Cuando los archivos se suben a Dropbox entonces se deben meter dentro de la carpeta Public:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    ResponderEliminar
  102. Hola potro, depronto sabes de alguna manera para que las imagenes no se deban pasar con clik sino con determinados segundos?

    Gracias

    ResponderEliminar
  103. Umm no, al menos no con este método.

    ResponderEliminar
  104. Estimado: como puedo hacer para que esta utilísima galeria pueda funcionar en varios posteos. He intentado numerar el id pero no funciona. Un abrazo

    ResponderEliminar
  105. Efectivamente primero tienes que cambiar el ID de cada galería, es decir, que en el último código que se menciona tienes que cambiar los adicionales de esto:
    id="myGallery"

    Por esto:
    id="myGallery2"

    Esa será la segunda galería, ahora en la parte del script (primer código) busca esta área:
    $('#myGallery')

    Y cámbiala por esta:
    $('#myGallery,#myGallery2')

    Por último, en el código de los estilos debes cambiar esto:
    #myGallery {
    width: 100%;
    height: 400px; /* Alto de todo el contenedor */
    }
    #myGallery img {
    border: 2px solid #52697E; /* Borde de las imágenes */
    }

    Por esto:
    #myGallery, #myGallery2 {
    width: 100%;
    height: 400px; /* Alto de todo el contenedor */
    }
    #myGallery img, #myGallery2 img {
    border: 2px solid #52697E; /* Borde de las imágenes */
    }

    Sólo mira bien los cambios que se han añadido y podrás agregar tantas galerías como quieras.
    Un abrazo.

    ResponderEliminar
  106. Graciassss,creo que esta es la más práctica galería de imágenes. Abrazos

    ResponderEliminar
  107. Qué bueno que te ha gustado la galería Enrique, un abrazo!

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

    ResponderEliminar
  109. Hola! Necesito un poco de ayuda... yo quiero agregar varias galerías, pero cada vez que agrego una se arruina la anterior, no funcionan bien; aquí las puedes ver

    http://chrisuckermannnews.blogspot.com/2010/08/galera-de-fotos-chrisuckermannnews.html

    Las galerías de "Somos" y "Kdabra1" trabajan mal, pero la de "Kdabra2" trabaja bien.

    ¿Me podrías ayudar a solucionar esto?

    Muchas gracias de antemano y excelente galería! xD

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

    ResponderEliminar
  111. Mira el comentario #111, ahí están las indicaciones para agregar más de una galería.

    ResponderEliminar
  112. Hola! si... eso fue lo que hice, pero me sigue pasando lo mismo, la última galería que agrego se ve bien, las anteriores no funcionan bien :( ¿será porque están en la misma entrada?

    ResponderEliminar
  113. En una entrada normal, no las he colocado como un gadget sino que he colocado las tres galerías en una misma entrada.

    http://chrisuckermannnews.blogspot.com/2010/08/galera-de-fotos-chrisuckermannnews.html

    Pero ya probé colocar una de las galerías como un gadget y las otras dos en la entrada y me sucede lo mismo, la última si sirve las demás no. :S

    ResponderEliminar
  114. Yo veo funcionando bien las tres galerías que pusiste, lo que puede suceder es que tenga conflictos con tu plantilla y quizá no lo aprecies tal como debería verse pero ese es uno de los tantos problemas que tienen esas plantillas.

    ResponderEliminar
  115. Awwww bueno... muchas gracias por la ayuda! Saludo!

    ResponderEliminar
  116. Puedo agregar esta galeria a una entrada?

    ResponderEliminar
  117. Gran post, pero yo no sé cómo ponerlo en las entradas, jooooooooooo.
    Lo incluí como un gadget y me ocupa toda la pantalla, ays, qué lío.

    ResponderEliminar
  118. CHETTO, sí, aunque habrá algunas plantillas en las que los resultados no sean muy favorables.

    CHG Events, el procedimiento es el mismo, sólo que lo que va en el HTML/Javascript iría en una entrada.

    ResponderEliminar
  119. Muchas gracias, Potro.
    Lo voy a intentar ahora mismo.
    Muy amable.

    Saludos.

    ResponderEliminar
  120. hola, hice todo al pie de la letra y no funciono......cua !!

    ResponderEliminar
  121. hola tengo problemas para encontrar las etiquetas donde hay que pegar los codigos, pego el primero despues de head> pero no encuentro o veo /head>, el segundo codigo no lo puedo pegar ya que no encuentro ]]> lo más parecido es }<![CDATA[/* lo pego antes de esa etiqueta y me aparece todo el codio en texto el el diseño del blog, estoy pez en esto del codigo thml y es posible que pegando otros codigos para contadores de google o similar haya borrado algo, anque creo que no.

    Y por otra parte, finalmente la galeria no se puede añadir a una entrada o post existente, sólo puede verse como un gatge independiente?

    Un saludo y mil gracias!!!

    ResponderEliminar
  122. Presiona las teclas CTRL + F, se abrirá un recuadro de búsqueda, ahí escribe la etiqueta o código que no encuentras, así te será más fácil dar con ella.
    La galería sí se puede mostrar en una entrada, sólo hay que pegar el último código dentro del post, aunque dependiendo de la plantilla podría no verse igual de bien.

    Saludos.

    ResponderEliminar
  123. OYe potro en que hosting se tiene que subir?

    ResponderEliminar
  124. En cualquiera que te dé una URL que permita ejecutar el archivo como Google Sites o Dropbox.

    ResponderEliminar
  125. Potro he seguido los pasos pero cuando lo coloco en el blog me sale la ultima imagen cortada. No encuentro ningun error, ¿tienes idea de donde puede ser?

    Muchas gracias de antemano.
    Un saludo

    ResponderEliminar
  126. Hola AMCFREGENAL, ¿en dónde lo has puesto para que pueda verlo?

    ResponderEliminar
  127. En la parte inferior de esta pagina.

    http://amcfregenal.blogspot.com/

    ResponderEliminar
  128. El problema está en el hosting donde has alojado los scripts, si abres uno de esos enlaces verás que no abre el script sino que abre una página para descargar el archivo.
    Prueba subiéndolo en otro hosting como Google Sites o Dropbox.

    Además de eso también usas Scriptaculous el cual no es compatible con jQuery. Para poder usar ambos necesitas aplicar un hack:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  129. Mucha gracias Potro eres un maquina.

    Me queda una última duda, cuando pones mas de un álbum en una misma entrada solo funciona el primero ¿existe la forma de conseguir que funcionen todos?

    Muchas gracias.

    ResponderEliminar
  130. Potro tengo el probela de la compativilidad con jQuery no soy capaz de colocar los codogos.
    ¿Me podrias decir como quedarian los codogos de este album para que sea compatile?

    Gracias.

    ResponderEliminar
  131. AMCFREGENAL, mira el comentario #111, ahí están las indicaciones.

    CUARTA FILA, ahí en la entrada que habla sobre ese tema está un ejemplo para que puedas guiarte, sólo debes colocar el jQuery.noConflict(); donde se indica y cambiar los $ por jQuery

    ResponderEliminar
  132. Potro perdona mi torpeza, pero he seguido todos los pasa de http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html y no consigo nada no se el motivo. El alojamiento que utiizo para los tres archivos es Dropbox.

    Si puedes dejarme como quedarian los codigos te lo agraceceria mucho.

    Un saludo.

    ResponderEliminar
  133. ¿En dónde lo has puesto para que pueda verlo?

    ResponderEliminar
  134. Potro me ocurre un problema, no se me ve la galería. Creo que es por el problema que me comentaste de incompatibilidad y que yo entre a verlo de otra forma. No consigo hacer que funcione, ya mire la entrada que publicaste en referencia a eso. Me puedes decir como van los códigos que se ve que me quedo algo atrás.

    Muchas gracias.

    Pd: esta publicado en http://amcfregenal.blogspot.com/search/label/Galeriaimagenes

    ResponderEliminar
  135. Recuerda que cuando los archivos se suben a Dropbox se deben poner dentro de la carpeta Public.

    ResponderEliminar
  136. Potro ya lo tengo todo bien, pero me da un fallo.
    Al poner dos galerias me da un fallo la primera.
    Si puedes echarle un vistazo, a ver en que e fallado, pasa imagenes de la primera veras...
    http://amcfregenal.blogspot.com/search/label/Galeriaimagenes

    Gracias.

    ResponderEliminar
  137. Podría ser porque en la primera imagen de la galería que no funciona, has incluido especificaciones de width y height.
    Prueba quitárselas para que queden como las demás y ver si eso lo resuelve.

    Saludos.

    ResponderEliminar
  138. Nada Potro he probado y sige sin funcionar. No se te ocurre nada que pueda funcionar.

    Muchas gracias.

    ResponderEliminar
  139. Pues no sé qué más pueda ser, quizá la opción más radical sería que uses sólo una galería por página para que así no te dé conflicto entre cada una :/

    ResponderEliminar
  140. Creo que ya he encontrado el problema, todas las galerias tienen que tener el mismo numero de imagenes. Sabes que le puedo hacer para que esto no sea asi.

    Muchas gracias

    ResponderEliminar
  141. Lo desconozco, y es que el script no hay ningún parámetro acerca del número de imágenes lo que lo vuelve más complicado de resolver.

    ResponderEliminar
  142. Muy buenas,Potro...

    Quería poner en mi blog una presentación de entradas como la que tiene esta web en su cabecera http://todoseries.com/ en la que vayan pasando mis principales entradas. Hay algun post que trate este tema o similar. Muchas gracias de antemano.

    ResponderEliminar
  143. Hola Javier,

    Hay como cinco sliders publicados aquí, En el buscador del blog escribe 'slider'
    Ahí encontrarás algunos que quizá puedan interesarte.

    ResponderEliminar
  144. HOla, UNa preguntota

    Alguna idea de como hacer una Videogalería?

    algo maso menos parecido a esto:

    http://blogoflesbian.com/media/videogaleria/

    lo que pasa es que en mi blog, tengo solo vídeos... en una sección y pues me gustaría mas que se viera como galería =D

    Gracias

    ResponderEliminar
  145. Con Shadowbox puedes hacer algo bastante parecido. Saludos.

    ResponderEliminar
  146. Me encantó la galería y el post realmente parece muy bueno, pero la verdad es que a mi no me salío! Soy bastante lenta y perdón mi ignorancia pero no se hacer la parte del principio: "descomprímelo y sube los tres scripts a un hosting" Creo que ahí estuvo el problema, por que después pude hacer todo bastante bien. ojala puedas ayudarme porque me gusto muchisimo! Felicitaciones, y por adelantado, gracias!

    ResponderEliminar
  147. Hola Sense,

    Primero hay que descargar el archivo. Ya que se ha descargado debes tener un programa que descomprima archivos como WinZip o WinRar, teniendo cualquiera de esos dos programas sólo le das doble click al archivo que descargaste y te abrirá una ventana que te dice que se va a descomprimir, elige la ubicación donde se descomprimirá el archivo (por ejemplo Mis Documentos), una vez descomprimido verás una carpeta con tres archivos, o sólo los tres archivos (eye.js, spacegallery.js, y utils.js)

    Esos archivos son los que tienes que subir a un hosting. Para saber cómo hacerlo mira este enlace:
    http://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html

    ¡Saludos!

    ResponderEliminar
  148. Hola Potro. Excelente tu blog...
    Una consulta... existe algun parámetro como para que las imagenes cambien solas sin la necesidad de hacer clic en cada una de ellas ???

    Muchas Gracias
    Sergio

    ResponderEliminar
  149. Me temo que no Sergio, en la página del desarrollador no hay ninguna atribución a ese tipo de modificaciones.

    ResponderEliminar
  150. Una preguntaa! no entendi la parte de las url! puedo pegar una url de imagesharck y me va a funcionar? GRACIAS DE ANTE MANO!

    ResponderEliminar
  151. Claro, siempre y cuando la URL esté bien puede funcionar con cualquier servicio de alojamiento de imágenes.

    ResponderEliminar
  152. Hice paso por paso, subi los tres script al hosting que mencionaste por ahí (google sites) y copié todo en la plantilla pero aun así no me funciona me aparece esto : No hemos podido guardar tu plantilla

    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The reference to entity "d" must end with the ';' delimiter.

    Mi blog es http://locurasescritasenpapel.blogspot.com/
    Y las imagenes estan colocadas abajo de todo, son unas cuantas por que añadi el gadget como dice ahí,pero no hay forma de que me funcione y creo que seguí los pasos tal como lo indica ahí:S

    ResponderEliminar
  153. Hola de nuevo Annnn,

    Quizá se trate de un problema con la URL del archivo que subiste, prueba ponerlo de nuevo, si te marca le mismo error pon aquí las URLs de los archivos que subiste.

    ResponderEliminar
  154. Hola el Potro te queria preguntar xq es que mi menu no funciona, estuvo funcionando un tiempo y ahora no funciona este es mi blog: http://informeslagopuelo.blogspot.com/ te agradeseria mucho si me ayudaras ya que el blog lo he hecho gracias a vos.

    ResponderEliminar
  155. Hola,

    Lo que sucede es que has puesto un script que se llama Mootools, ese script no es compatible con jQuery que es el que se usa para esta galería.
    Saludos.

    ResponderEliminar
  156. MUCHISIMAS GRACIAS TE DEBO MUCHAS... UN ABRAZO DESDE LAGO PUELO ARGENTINA

    ResponderEliminar
  157. Como siempre no hay necesidad de buscar en la web todo se encuentra en este blog.
    Gracias Potro

    ResponderEliminar
  158. Potro, acabo de incorporar esta galería a mi blog, pero no se ve en IE...

    www.fran-rodriguez.es

    ResponderEliminar
  159. ¿Las imaágenes pueden estar en formato png?

    ResponderEliminar
  160. Hola potro puse esta galeria en un par de entradas de mi blog y de principio me ha quedado genial me gusta mucho como se ve el problema resulto cuando agregue otras dos galerias todas cuando entro al post funcionan a la perfeccion el problema es en la portada ya que uso entradas estilo magazine 3 que tambien provientes de este blog el detalles es que en la portada esta configurado el blog para que se muetren 15 entradas pero cuando complete las cuatro entradas con este tipo de galeria solo se mustran 8 entradas otra cosa cuando entro en la etiqueta de fotografias solo se muestran estas cuatro entradas hasta que le doy en el boton de avanzar se muestra en otra pagina ahora si ya completas las 15 que deverian ser revise todos los comentario a ver si encontraba la solucion trate con el comentario 111 sin ningun resultado.

    ResponderEliminar
  161. De hecho me estoy dando cuenta de que en los dos ultimos post que tengo con esta galeria desaparece adsense

    ResponderEliminar
  162. Fran Rodríguez, quizá sea tu versión de IE, pero... aunque en IE sí debe de verse no funciona nada bien en ese navegador.

    Darío, sí, no debe haber problema con eso.

    ResponderEliminar
  163. ADM, aparecen menos entradas porque al agregar más elementos (en este caso las galerías) el blog tarda más en cargar y Blogger se ve "obligado" a mostrar menos entradas:
    http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

    Para que eso no suceda se debe procurar no usar tantos gadgets, imágenes muy grandes, y muchos scripts.

    ResponderEliminar
  164. Gracias Potro por la respuesta de hecho estoy pensando en cambiar mejor por shadowbox

    ResponderEliminar
  165. Antes de que lo consideres, Blogger parece que está trabajando en su propio sistema de ventanas modales que funcionan también como galería, así que quizá sólo sea esperar un poco para ver si te convence el de Blogger, o Shadowbox.

    ResponderEliminar
  166. Hooo muchas gracias por la información ya mismo me pongo a investigar que bueno que vi tu respuesta porque ya estaba a punto de hacer los cambios.

    ResponderEliminar
  167. Es ciero potro ya lo comrobe en un blog de pruebas y en cualquier imagen que das clic se abre una ventana modal y si hay mas de una foto da la opcion de brincar a la segunda imagen de hecho me di una vuelta en la entrada de shadowbox aqui en tu blog y he comprobado que en la linea que tienes tres fotos ha dejado de funcionar shadowbox y se abre la ventana modal de blogger tiene un buen aspecto y carga muy rapido las otas ventanas que tienes con videos o paginas cargan normal con shadowbox

    ResponderEliminar
  168. Ooops parece que solo son pruebas de blogger dado que ya funciona nuevamente bien shadowbox en en esa linea de tres fotos que te comente

    ResponderEliminar
  169. Es que agregué un código para que ese sistema de Blogger no hiciera efecto aquí y así no interfiriera con Shadowbox, por eso ya no se ven otras mas que las de Shadowbox.

    ResponderEliminar
  170. hola potro mi pagina es yeinimora.tk soy nueva en esto tengo varias sesiones de fotos en mi menu cres que si marco una casilla de tal sesion se abra de esa forma puedes esplicarme como hacer para lograrlo o es imposible ...bueno para ti no hay nada imposible cres que puedas ayudarme por favor

    ResponderEliminar
  171. Hola yeinimoramodel,

    Lo que puedes hacer es poner la galería esta en una entrada o una página independiente, luego en tu menú enlazas esa entrada, de esa forma cuando el usuario haga click ahí se abrirá la entrada que contiene la galería.

    ResponderEliminar
  172. Saludos Potro

    La verdad es que he implementado en uno de mis blogs esta presentación de imágenes porque me parece minimalista y elegante. Sin embargo hay una cosa que no entiendo..

    Se supone que hay una función de carga, osea que sea el número que sea de imágenes que tengas puestas, aparece un .gif girando mientras éstas cargan. Hasta ahí todo correcto, de hecho ese gif aparece y no se va hasta que todas las imágenes están cargadas

    Sin embargo si el número de imágenes es alto (o basta con unas pocas de mayor peso), se ve cómo cargan a la derecha del post. Obviamente es algo que queda bastante mal, sobre todo si pruebas a poner 30 imágenes. Y me pregunto, ¿acaso esa función no debería servir para 'ocultar' toda la carga de imágenes que hace en segundo plano el script y mostrarnos únicamente el gif de cargando?

    A ver qué opinas del asunto, si es un 'cabo suelto' que se dejaron los creadores de ese script, y si tiene posible solución

    ResponderEliminar
  173. Opino lo mismo que tú, pero quien desarrolló la galería evidentemente opina diferente pues su intención del GIF me parece que fue meramente ornamental ya que se muestra al mismo tiempo que carga.
    Sí, pienso que debería ocultarse el contenido mientras carga, pero para nuestra mala suerte el script no tiene esa función y todo se va a un lado mientras carga :/

    ResponderEliminar
  174. Saludos de nuevo, Potro

    Tras unas cuantas horas echando un vistazo a las diferentes opciones de esta galería, creo haberlo solucionado. Cuando comenté aquí todavía barajeaba la opción de toquetear en otras galerías, pero le vi posibilidades a esta. He tardado mucho porque no entiendo nada de Javascript ni nada parecido, así que he tenido que ir deduciendo

    Explico la historia de manera sencilla..

    Abrí el archivo 'spacegallery.js' con el Bloc de Notas para echar un vistazo, y me resultó curioso ver esta línea:

    loadingClass: null, // CSS class applied to the element while looading images

    Al parecer las propiedades de la 'pantalla de carga' (por llamarlo así) se establecen a través del CSS y no con Javascript. Cosa que, la verdad, puestos a hacer un script que muestra una galería de imágenes, pues se lo podrían haber currado y haber 'vaciado' el fondo. Pero en fin..

    Total, que miré la línea de CSS referente a ese apartado, y me encontré con esto:

    a.loading {
    background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TZUg9AbaMDI/AAAAAAAABQQ/fm_HIeX8MPg/ajax_small.gif) no-repeat center;
    }

    Puse más atributos tipo: 'display: none', o 'visibility: hidden'. Hasta pensé incluso en buscarme las habas para incluir ahí una llamada a un script que simplemente ocultara el div (que como es un evento de carga, no importaría). Total, que al final cojo y hago lo más simple: elimino la imagen radicalmente y en lugar de eso pongo:

    background: #000000 (puedes poner el color que quieras)

    Y voilá. Asunto arreglado. Verás obviamente esa entrada de un color plano, pero al menos cargues las imágenes que cargues no vas a ver ese proceso

    ResponderEliminar
  175. Dicen que las soluciones más simples a veces son las más efectivas. Con un cambio sencillo has sabido cómo solucionarlo. ¡Enhorabuena! :)

    ResponderEliminar
  176. Es muy buena esta galeria, ya la estrene, jejejeje....!!!

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

    ResponderEliminar
  178. buenas POTRO tengo una duda, lo pude hacer pero al ver mis entradas solo me aparece uno activado con el scrib los otros me salen como congelado y las fotos pegadas en una esquina te adjunto mi blo para ver mi me ayudas saludos !

    http://andremaltes.blogspot.com/search/label/Cotidiano

    PD:son las ultimas 2 entradas

    gracias

    ResponderEliminar
  179. Hola Andre,

    Lo que pasa es que no se pueden usar dos galerías en la misma página, y cuando estás en las etiquetas muestra ambas galerías, por eso dejan de funcionar. Pero si están por separado (como cuando la ves sólo en la entrada individual) funciona sin problemas.

    Saludos.

    ResponderEliminar
  180. Hola Potro hice todos loa pasos pero se quedan congeladas las imagenes algo hice mal?
    http://templario-miscenciaymislibros.blogspot.com/

    Saludos

    ResponderEliminar
  181. Hola Templario,

    No debe haber más de una versión de jQuery en el blog ni tampoco versiones repetidas, esa podría ser la causa por la que no está funcionando:
    http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

    ResponderEliminar
  182. Sos un genio Potro,mi respeto y adimiracion.....ya funciono perfectamente....Mil gracias.............saludos

    ResponderEliminar
  183. Qué bueno que todo ha salido bien Templario :)

    ResponderEliminar
  184. Oye potro crees que un slide, como este o cualquier otro, pueda agregarse a una pestaña de bienvenida (o landing page) de facebook; como es posible como crees que se haria. Grax por tu respuesta...

    ResponderEliminar
  185. Tal vez usando los nuevos iframes de Facebook, pero como mi cuenta no está verificada no he podido crear iframes y probar qué tanto puede añadirse en ellas :(

    ResponderEliminar
  186. Gracias potro eso imagine, asi ya estoy checando lo de iframe, aunque estamos igual porque mi cuenta tampoco esta verificado; pero bueno ya estoy viendo algunas aplicaciones que tal vez me lo permitan, si puedo hacerlo te hago otro comentario para decirte; aunque no creo que sea de interes general jajaj gracias de cualquier modo potro.

    ResponderEliminar
  187. Por supuesto que es de interés general, yo igual vi una aplicación que permite usar los iframes pero no he tenido nada de tiempo para probarlo, y tengo que hacerlo para poder actualizar la entrada de la pestaña de bienvenida de Facebook, así que seguro tú lo probarás antes y me platicarás :)

    ResponderEliminar
  188. Hola Potro

    Tengo problemas con el spacegallery.

    Añadí los 3 archivos a dropbox.com ... seguí los pasos para la edición en HTML del blog... Y resultó una maravilla, me encanto el spacegallery. Si funcionó.

    El problema es que cuando me salgo de dropbox e ingreso a mi blog, el spacegallery no funciona.
    Y cuando inicio sesión en dropbox.com empieza a funcionar de nuevo el spacegallery.

    Algún otro hosting que me recomiendes?

    Y gracias por todo tu apoyo carnal.

    ResponderEliminar
  189. Dropbox está bien RICKYMENPLAT, pero debes subir los archivos dentro de la carpeta Public para que estén al alcance de la red, de los contrario sólo tú puedes verlos estando en tu sesión. Si los colocas en la carpeta Public se acabará el problema.

    Saludos.

    ResponderEliminar
  190. Ya me salió el spacegallery.... muchas gracias Potro, eres super¡¡¡¡¡¡¡

    Saludos Carnal....¡¡¡¡

    www.rickymenplat.blogspot.com

    ResponderEliminar
  191. Qué bueno que así haya sido RICKYMENPLAT, saludos!

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger