Ya ha salido una nueva versión del LightboxJS.Este script permite cargar las versiones ampliadas de las imágenes en la misma ventana del navegador sini tener que abrir un pop-up ni cambiar de página, lo que lo hace ideal para blogs con muchas imágenes o para photoblogs. Permite que el usuario pueda ver la versión ampliada y volver inmediatamente al texto original sin tener que cargar páginas nuevas, abrir pop-ups o pestañas o apretar el botón de «Volver».Para utilizarlo podéis bajarlo de la página del creador (en huddletogether). Después del salto he puesto instrucciones y posibles usos del script. También hay un plug-in (hecho por nitemayr, basado en el plugin original de zeo) que se puede utilizar en WordPress para integración más fácil.
Las dos adiciones mas interesantes son el uso de scriptaculous y prototype para efectos visuales y la capacidad de poder poner más de una imagen con flechas de «Siguiente» y «Anterior» como se puede ver aquí:
Finalmente: La solución es 100% javascript y CSS, por lo que no es necesario toquetear ficheros PHP o ASP aquellos de vosotros que tengáis hostings de los malitos y solo podáis modificar el HTML de vuestros blogs.
Hay varias formas de utilizar LightBoxJS pero es mejor si partimos de las situaciones en las que se puede aplicar.
LightboxJS como mejor funciona es cuando sirve para mostrar una imagen o un grupo de imágenes a quien visita una página pero reforzando la idea de que la vista de la imagen es temporal y que hay aún más cosas en la página original a la que hay que volver. Hace esto generando una «pseudo-ventana» que nos muestra la imagen en tamaño mayor y un botón de cerrado para volver a la anterior. Esto funciona muchísimo mejor para mantener la atención del visitante al nunca cambiar el contexto de lo que se hace, solo el modo.
Utilizar lightbox no podria ser más simple. Se añaden los scripts de Javascript y el CSS en el header de la página (cuidado con la ruta de los ficheros, aqui se asume que estan bajo js y css:
[html]
[/html]
Y se modifica el link a la imagen para que incluya un elemento rel=»lightbox» y de preferencia un title=»Título corto» que aparecerá como comentario abajo de la foto.
Un ejemplo:
Sin LightBoxJS:
Hola! Me habían pedido que pusiera una imagen de mi escritorio y la aplicación que utilizo para manejar ficheros. Así que aquí estan:
Esta es una imagen del manejador de Ficheros, llamado PathFinder que utilizo:
Y estas son dos imágenes de mi escritorio utilizando varias utilidades:
Con LightBoxJS:
Hola! Me habían pedido que pusiera una imagen de mi escritorio y la aplicación que utilizo para manejar ficheros. Así que aquí estan:
Esta es una imagen del manejador de Ficheros, llamado PathFinder que utilizo:
Y estas son dos imágenes de mi escritorio utilizando varias utilidades:
En el primer ejemplo se puede ver como donde en el primero las fotos se abren en una ventana nueva, en la misma ventana o en una galería de fotos, respectivamente, el flujo de la lectura se interrumpiría. En el segundo ejemplo la lectura simplemente se «pausa» para ver la foto y luego continúa. En el caso de las dos fotos juntas incluso se puede abrir la primera, mover el ratón sobre el borde y con la flecha ver la siguiente.
Lightbox también permite hacer lo mismo pero directamente con links en vez de imágenes pequeñas, lo que abre posibilidades de aprovechamiento de espacio:
Hola! Me habían pedido que pusiera una imagen de mi escritorio y la aplicación que utilizo para manejar ficheros. Así que aquí estan:
Esta es una imagen del manejador de Ficheros, llamado PathFinder.
Y estas son dos imágenes de mi escritorio utilizando varias utilidades.
Lightbox busca links («a href») que rengan el código rel=»lightbox». El URL al que apuntan debe ser a una imagen o el script no funcionará correctamente. Si queremos que hayan varias imágenes y se puedan ver en orden se utiliza el código rel=»lightbox[identificador]» donde todas las que tengan el mismo identificador (cualquier palabra) aparecerán juntas.
Damn…
I like your picture that looks really great ;)
I should try to learn from you!
I like the lightbox stuff, too, but sometimes I think toooo much JS doesn’t do your page any good.
Makes it unrenderable in many older browsers and PCs..
I know, I know… I have that problem, too ;)
But good job, well done page.
Concerning your question:
I think you are right that you need to call initLightbox after the DOM change.
But calling it in the onmousedown wouldnt do you any good, because the DOM hasnt changed just yet. The content gets loaded asyncronously and then inserted. If you want to run the function after the content has been inserted you need to insert the call in my function ‘IAM_ajaxDisplayWhenLoaded’.
Add it to the end of the else{ section, then everything should be inplace.
-V
Vitus:
I’ve managed to make it work. I started using LightboxJS as a plugin to make it easier on myself. I’m using this: http://www.4mj.it/lightbox-js-v20-wordpress/
But I commented the scriptaculous part to have it load only once. Then in ajax-more.js I added initLightbox(); just before the last bracket in both IAM_ajaxDisplayWhenLoaded and IAM_ajaxHideMore (the last one is because if the text is hidden the lightbox images need to be re-parsed, as pointers would point to nothing).
You mentioned something about my image. I’m not sure which image you mean. My avatar? The images in the post itself?
I meant the pic on this page itself.
The lights and the bridge reflected in the wet street that lookgs really neat ;)
-V
Ah, ok. I took that picture in San Francisco, feel free to use that image if you like it. I was especially proud of how it came out (which is essentially what I mention in a related post in spanish, where I was disappointed that girls in bikinis had more hits that this picture :)
The picture is in here: http://www.eduo.info/gallery/v/Trips/MWSF2003/mwsf-20030109/age.jpg.html
You can get the full-sized one with the link below the resized image. The next one isn’t that bad either.