Alojamiento desde 3,8€ mes
Consigue alojamiento con xzblogs y Dreamhost a partir de 3,8€ al mes con dominio .com propio, 500 GB de espacio y 5 Terabytes de Transferencia Mensual. (más información)
Guía para instalar un visor de imágenes AJAX
Es probable que al hacer clic sobre una imagen de un blog hayais visto como en vez de abrirse una página web mostrándola, se abría una especie de ventana emergente dentro de esa misma página, donde se puede ver la imagen ampliada.
Pero como siempre, una imagen vale más que mil palabras asi que aquí os dejo un ejemplo, haciendo clic en la foto vereis como funciona:
Existen varios sistemas que permiten esta funcionalidad, escoger uno u otro es cuestión de gustos, yo me decanté por Grey Box, pero realmente hay otras opciones como Thick Box o Light Box.
Los requisitos que necesitaba eran los siguientes:
- Que funcionase en distintos navegadores
- Que en caso de no ser compatible con un navegador o tener un bloqueador de popups o JavaScript, funcionase como si fuera un simple enlace a una imagen
- Que tuviera un plugin para implementarlo en Wordpress
Escogí GreyBox que cumple estos tres requisitos.
Los pasos que dí para instalar este sistema fueron los siguientes:
- Instalar el plugin de Grey Box
Para ello instalé gbplugin, un addon para Wordpress que no conseguí hacer funcionar correctamente, pero que al menos integra de forma muy sencilla el visor de imágenes en tu blog. - Modificar el tamaño de los thumbnails (mañana lo publicaré)
Wordpress genera unos thumbnails de un tamaño determinado por defecto, pero para integrarlo con el diseño de mi blog, tuve que trastear en sus códigos para conseguir que se adaptase a las medidas que yo quería. - Automatizar los enlaces para Grey Box
Cuando subimos una imagen a un artículo de nuestro blog podemos elegir varias opciones, como insertar un enlace, la imágen o un thumbnail con un enlace hacia la imagen a tamaño completo, pero para hacer que automáticamente se añada para visualizarse mediante Grey Box tuve que trastear una vez más en el código. - Personalizar el diseño de la ventana
La ventana que se genera al hacer clic en una imagen para ampliarla puede ser fácilmente personalizable mediante CSS.
Este fin de semana os iré contando los pasos que dí hasta conseguir hacerlo funcionar.
Aquí teneis los sitios donde podeis encontrar los distintos visores de imágenes: Grey Box, Thick Box y Light Box.
El plugin de Grey Box (gbPlugin) para Wordpress lo podeis encontrar en la página de Andrés Nieto.
Compártelo
Si te ha gustado este artículo, envíalo a Meneame, Fresqui o Seoclon
José Antonio dijo
24 de June del 2007 a las 1:21 am
El visor me parece espectacular (sobre todo por la chica google) y por un momento he pensado en tomar nota para implementarlo en mi sitio ya que tengo varios apartados con imágenes y/o fotografias, pero pienso que su utilización disminuye las posibilidades de insertar publicidad que, al fin y al cabo, por lo menos en mi caso, el único modo de abrir una puerta a la posible amortización del coste invertido en colocar los contenidos que ofrezo a mis visitantes.
David Villarreal dijo
25 de June del 2007 a las 12:15 pm
En cuanto a publicidad y las imágenes, quizás lo mejor es que al ampliar las imágenes se abran en una página nueva donde hayamos puesto publicidad
Quizás con el tiempo lo haga, aunque de momento me soluciona bastante la vida al reducir las imágenes a unas miniaturas (thumbnails) que ocupan muy poco y que hacen que la longitud de los artículos sea menor, ayudando tambien a que aumente el CTR de los bloques de anuncios de por abajo
Un saludo
hector dijo
4 de June del 2008 a las 4:29 am
soy nuevo en el area de diseños web y no me gusta flash por que no se usarlo… yo quiero agregarle a mi diseño web un visor de imagenes y no se como hacerlo… agredeceria su ayuda ya que la necesito gracias… saludos