Pictobrowser. Galería y slider. | Oloblogger Alguna que otra vez me habeis preguntado por algún slider majo para mostrar vuestras imágenes. Este lo es y además se puede incorporar al bl...

26 de febrero de 2010

Pictobrowser. Galería y slider.

Alguna que otra vez me habeis preguntado por algún slider majo para mostrar vuestras imágenes. Este lo es y además se puede incorporar al blog como gadget, por lo que no requiere mucha historia ni por supuesto, tocar la plantilla. Eso sí, sólo carga imágenes desde Flickr o Picasa, pero esto es precisamente lo que lo hace muy cómodo de configurar.

Podemos ir navegando por las imágenes pinchando en las propias imágenes, en sus miniaturas o de manera automática mediante el botón slide-show. Al final de este post teneis un ejemplo.

Se llama PictoBrowser y la primera pantalla que os aparece (la que se reproduce a la derecha) es dónde se selecciona si vamos a utilizar imágenes de Flickr o Picasa. Seleccionamos la que corresponda e introducimos nuestro usuario en el correspondiente servicio. A tener en cuenta: las imágenes deben ser públicas para que se muestren.

Una cosa interesante es que podemos mostrar galerías "ajenas", porque podemos usar el nick de cualquier usuario. En este caso, lo único que hay que tener presente es que no tendremos el control de esas imágenes y si el usuario las borra o simplemente las hace privadas, la galería no funcionará.

Si usamos Flickr, podremos escoger entre mostrar un set completo (albúm), las imágenes de determinada etiqueta (tag) o el contenido de un grupo. Sin embargo, si utilizamos Picasa, sólo podremos elegir entre las dos primeras opciones al no disponer este servicio de la utilidad de grupos. Os recordamos que todas las imágenes que subís a un blog Blogger, van a parar a un album Picasa automáticamente.

En el tercer paso es dónde escogemos tamaño de las imágenes, del visor, alineación, color de fondo, transparencia, mostrar o no títulos,... y unos cuantos parámetros más. Aquí hay algunos ejemplos de los resultados que se obtendrán en función de los parámetros de configuración que escojamos y debajo de este párrafo una galería totalmente operativa. Prueba la reproducción automática.

Get the flash player here: http://www.adobe.com/flashplayer


Un buen servicio a cambio sólo del enlace que incorpora el script.

Actualización: Una prueba con imágenes de Flickr seleccionadas por etiqueta.


Get the flash player here: http://www.adobe.com/flashplayer

¿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

36 comentarios :

  1. La verdad muy bueno yo perzonalmente lo recomiendo lo uso desde que enpese Mi Blog mi blog y nunca se colgo ni tube ningun problema. Ademas el Script es muy facil de manipular;)

    Saludos Oloman!!!

    ResponderEliminar
  2. Muchisimas gracias por la informacion, me recorri todo el blog buscando algo asi, porque si bien puedo subir fotos a mi blog, se me hace que un slider queda mucho mas lindo, ademas que se pueden ver todas las fotos de un solo lugar y no hay necesidad de cambiar de pagina, y mas que yo hago jardineria y tengo muchisimas fotos de mis trabajos y quiero que mis clientes las puedan ver bien..
    gracias por la informacion..
    un saludo!

    ResponderEliminar
  3. Amigo Oloman,

    Nuevamente recurro a ti para que me soluciones, si tienes tiempo, un problema con el blog. Como bien sabes, muchas veces, cuando pinchas en Comentarios, te sale una ventana emergente que dice:

    Advertencia de seguridad

    ¿Desea ver el contenido de la página Web que se entregó de forma segura?.

    Yo quisiera que en mi blog no saliese, porque es un engorro y no sirve para nada.

    ¿Podrías sugerirme cómo hacerlo?

    Por ello te estaré muy agradecido.

    Recibe un cordial saludo, y que tengas un buen Domingo.

    Antonio

    ResponderEliminar
  4. Antonio, eso no es problema de tu blog sino de tu navegador. Probablemente usas Internet Explorer, porque lo acabo de comprobar y en Firefox no sale nada.
    No está en tu mano arreglarlo para todos porque dependerá de cómo cada uno tenga configuradas las opciones de seguridad.

    ResponderEliminar
  5. Amigo Oloman,

    En mi anterior comentario te hacía la siguiente pregunta:

    Amigo Oloman,

    Nuevamente recurro a ti para que me soluciones, si tienes tiempo, un problema con el blog. Como bien sabes, muchas veces, cuando pinchas en Comentarios, te sale una ventana emergente que dice:

    Advertencia de seguridad

    ¿Desea ver el contenido de la página Web que se entregó de forma segura?.

    Yo quisiera que en mi blog no saliese, porque es un engorro y no sirve para nada.

    ¿Podrías sugerirme cómo hacerlo?

    Por ello te estaré muy agradecido.

    Recibe un cordial saludo, y que tengas un buen Domingo.

    Antonio

    Muchas gracias por tu ràpida contestación, pero me pasa lo siguiente:

    En mi blog principal aparece esa ventanilla emergente, y en el blog de pruebas que tengo no aparece, aunque utilizo el mismo ordenador que, efectivamente, tiene el Internet Explorer.


    ¿Tendrá eso algo que ver con que el blog principal lo tengo con cuenta de hotmail, y el secundario de gmail?

    Si puedes ayudarme, te estaré muy agradecido, y, en caso contrario, pues lo mismo, mi agradecimiento por tu cortesía y tu dedicación a solucionarnos los problemas a todos los que recurrimos a ti.

    Recibe un cordial saludo,

    Antonio

    ResponderEliminar
  6. No, Antonio. Y ahora estoy más seguro. Es un control de seguridad de IE para cuando accedes precisamente a una página "segura". Salta cuando esta tiene contenido mixto (por ejemplo imágenes y texto). Observa que al acceder a los comentarios, la dirección de la página en lugar de empezar por http, comienza por https

    Cuando entras en tu blog principal, utilizas avatares y por tanto imágenes. Sin embargo, en la de prueba no hay avatares y por eso no salta el aviso.

    Sigue siendo una decisión individual que eso siga así o cambiarlo. Si quieres, haz la prueba y desactívalo en tu navegador. Para ello tienes que entrar en Herramientas (Tools) > Opciones de Internet (Internet options) > Seguridad (Security) > Personalizar nivel (Custom level) > y ahí buscar el apartado Miscelánea y cambiar el valor que tengas en Mostrar contenido mixto (Display mixed content) a Habilitado (Enable). Verás como deja de aparecerte.

    Realmente no sé si es muy necesario tener ese aviso o no, así que queda por tu cuenta restablecerlo a su valor original una vez que compruebes su resultado.

    ResponderEliminar
  7. hola olo mi consulta es la siguiente, me gustaria que me guies para poner ese slide pero como cabecera del blog, que se mantenga estatico y que los posts vengan debajo. gracias y felicitaciones por el blog

    ResponderEliminar
  8. Me ha encantado la idea, estuve probando y subí algunas imágenes a Flickr para compartir públicamente sin embargo la aplicación me dice que no es pública ¿alguna idea?

    ResponderEliminar
  9. Kabuki no entiendo para que quieres un slide para luego dejarlo estático. Para eso mejor una imagen simple ¿no?

    De todas formas, si lo que quieres es poner el visor en lugar de la cabecera, primero quita la que tengas y luego añades en su lugar un nuevo gadget tipo HTML/JavaScript. Por último copia allí el código de PictoBrowser.

    ResponderEliminar
  10. Hola Gem@.

    En el segundo paso de la versión Flickr, salen tres opciones Sets, Tags y Groups. Sólo te saldrán las imágenes que hayas montado en un SET, que hayas etiquetado o que estén en un grupo, respectivamente.

    Haciendo pruebas, ese mensaje que dices me salió cuando pinché en SET sin tener ninguno creado. Creo que lo más cómodo para una prueba es etiquetar igual todas las imágenes que quieres mostrar y escoger en el artilugio la opción central (tags) seleccionando luego la etiqueta en cuestión. Así hice el nuevo ejemplo de los japoneses.

    Suerte :P

    ResponderEliminar
  11. creo que me explique mal en realidad me referia a colocar como un gadget en la parte debajo del titulo y que quede estatico me referia a que siga estando al cambiar de paginas, http://magazinprueba.blogspot.com/ algo asi. saludos

    ResponderEliminar
  12. seria como poner un slider, por ejemplo "slid3r" en el lugar donde esta el primer post, sepuede?
    gracias y disculpa las molestias

    ResponderEliminar
  13. Vale. Ahora lo pilo. Para eso, sólo tienes que crear un gadget HTML/JavaScript en la barra lateral y meter allí el código del slider que sea. Luego de Guardar y sin salir de Ëlementos de Página, pinchas en el bloque de ese gadget, lo arrastras hasta justo encima del bloque de entradas y allí lo sueltas. Ese bloque será fijo para todas las páginas y quedará como si fuera un primer post.

    Si el aspecto es distinto con respecto a los posts, pues ya habrá que empezar a igualar el diseño. Esto depende de lo que quieras.

    ResponderEliminar
  14. Increíble. Venía a preguntarte si había alguna forma de hacer una galería exactamente igual a esta (incluso tenía un boceto hecho con lo que quería) y aquí me lo encuentro, e incluso mejor!

    Muchas gracias Oloman. Estoy renovando mi blog y voy a aplicar muchos de tus consejos. Voy a probarlo a ver qué tal.

    Un saludo!
    Esther

    ResponderEliminar
  15. Me funciona perfectamente, pero me gustaría cambiar, si se pudiera, el botoncito de "Notes". Hay forma de poner "Descripción" ??

    Un saludo

    ResponderEliminar
  16. Me temo que no. Es un flash y no creo que puedas editar ni ese fichero ni el script... No recuerdo si había algún enlace, pero si lo hay, envía una sugerencia para que ver si pueden sacar una versión castellano. Lo mismo te hacen caso.

    ResponderEliminar
  17. Consulta, me gustaría que este visor arranque solo al abrir el blog y no tener que tocar el botoncito de play...Es posible esto?

    ResponderEliminar
  18. Wallypesca, no sé si es posible. Tendrás que dirigirte al autor del artilugio.

    Por mi parte he probado añadiendo una variable AUTOSTART por si sonaba la flauta, pero no ha funcionado:
    so.addVariable("autostart","true");

    ResponderEliminar
  19. Hola! Me funciona de maravilla en el blog que estoy creando, soy algo novata y lo que me pasa es que puedo publicar la galería bien pero desde blogger no me deja añadir una presentación por escrito. La puedo escribir pero no la publica. Tienes idea de qué puede pasar?
    Muchas gracias!

    ResponderEliminar
  20. No sé cómo estás intentando "escribir" esa presentación que parece de texto, pero lo mejor es que la subas a algún servicio de almacenamiento online de presentaciones y luego incrustes en la entrada el código que te den. Saludos.

    ResponderEliminar
  21. estoy probandolo, con mi cuenta, "oselfa Faber", funciona, pero con "hadit arquitectos" no ¿por qué puede ser? gracias!

    ResponderEliminar
  22. No sé Oselfa. Sólo se me ocurre que el contenido pueda ser privado o que estés poniendo mál algún carácter.

    ResponderEliminar
  23. No hay alguna manera para poder agregar a la lista de imagenes mas carpetas, por ej para picasa solo se puede alegir una sola carpeta... no hay posibilidad de poder elegir todas o algunas?? y tambien hay alguna manera para que muestre las ultimas imagenes subidas???


    Saludos!!!

    ResponderEliminar
  24. Bilosony2, no sabría decirte. Creo que no, pero se me ocurre que puedes hacer algo parecido añadiendo TAGS a esas imágenes que quieres publicar y luego seleccionando esa otra opción.

    Si no te cuadra, quizás lo mejor sea que busques otra opción. Seguro que hay muchas más.

    Y enhorabuena por tu marcha en el 20Blogs.

    ResponderEliminar
  25. U... que bajon pero we!.. Ya encontre una solucion menos pesada :) Voy cambiando las imagenes a medida que subo nuevas es un poco mas de trabajo para vale la pena ya que puedo poner algunos efectos :D Ademas los url de las imagenes toman otra forma si les agrego ciertos atributos al url como por ej /s72-c/ se vuelve cuadrada y se pone en la derecha como si tubiera la propiedad Float:left;

    Y gracias por lo 20minutos... Pero me re olvide del concurso jeje y Ahora que veo alparecer hubo muchos problema con los mensajes tipo spam para las votaciones un bajon que la gente llegue al punto de hacer tanto spam para ganar una boludes como esa... "Pero los buenos casi siempre ganan" :D

    Saludos!!!

    ResponderEliminar
  26. Je, je, je... Ya no soy el único que hace chapucillas.

    Un saludo Bilosony

    ResponderEliminar
  27. Hola.Necesitaria ayuda con alguna configuración... en Pictobrowser elijo las opciones de ancho y alto y también el color. y resulta que al pegar el código en Blogger no me toma la opción del color de fondo del Pictobrowser (yo quiero que sea negra y sin embargo muestra un gris... aunque sin embargo mi código dice #000).

    ¿Qué podrá ser?
    Saludos y gracias

    ResponderEliminar
  28. Hola erdosain9. Mi primer ejemplo está con fondo negro. No sé cual será el problema porque no recuerdo si había otras opciones que pudieran alterar eso (p.ej. transparencia). No obstante y por si acaso suena la flauta, prueba con seis ceros #000000. Así es como yo lo hice.

    ResponderEliminar
  29. Hola! podría ser posible poner una galería slider como cabecera del blog? me dices como? Gracias!!!!

    ResponderEliminar
  30. No hay ningún problema Fabiana. Busca como "eliminar la cabecera" y en ese mismo post tienes como poner otra cosa en su lugar. Lo complicado es saber que slider escoger, porque hay muchas posibilidades. No te puedo recomendar una en concreto porque nunca he intentado utilizar ninguna de las que he visto.

    ResponderEliminar
  31. Hola de nuevo Oloman!!

    Estoy buscando algo parecido a esto, pero no encuentro ;-(
    Quizás haya algo actualmente mejorado...
    Lo que busco es un slider de imágenes que pasen solas o haciendo clic en flechas laterales, para ponerlo dentro de una entrada del blog.

    Gracia por tu tiempo de antemano!

    Abrazos
    Gorka

    ResponderEliminar
    Respuestas
    1. Hola Gorkaprofe. Teclea "slider" en el buscador de la izquierda y verás unos cuantos. Quizás alguno de esos te sirva.

      Eliminar
  32. Gracias Oloman!! Miraré ;-) el problema era utilizarlo en una entrada del blog (hay q hacer algo especial?). De momento he usado este, ya te contaré.

    Gracias por tu tiempo,
    Un abrazo

    ResponderEliminar
    Respuestas
    1. No, este por ejemplo lo puedes usar en una entrada y este otro, aunque no es un slider, sino una galería, también.

      Eliminar