aNieto2K

Lunes ~ Julio 10, 2006

Lightbox solo fue el principio

En Web 2.0 Technologies han hecho una lista de las mejores herramientas para crear pop-ups no intrusivos usando javascript. Voy a permitirme el lujo de hacer una descripción de las herramientas a mi juicio de esta fantástica lista.

ibox

Pequeño script (11kb) basado en Lightbox v1 con el cual podremos abrir sin problemas imagenes, contenido en línea y contenido cargado mediante Ajax. Lo más interesante es que además de ser pequeño nos permite continuar su funcionamiento desactivando el javascript (linka la imagen directamente).

Puntuación: 4s.jpg

submodal

Muy buena herramienta con la cual podremos mostrar ventanas modales en nuestros proyectos, entre otras cosas. Es algo más complicado de usar que el anterior pero no lo podemos decargar, se compone de 3 ficheros (2 js y 1 css) que dotan de una gran funcionalidad a esta herramienta y todo en menos de 10kb. Personalmente me parece el más feo estéticamente de todos :D

Puntuación: 4s.jpg

submodal-enhanced

Modificación del anterior en el que nos permite la insercción de dichos pop-ups de forma mucho más cómoda, simplemente usando el atributo class=”submodal”. Realmente una mejora necesaria.

Puntuación: 4s.jpg

prototype-window

Muy buena herramienta que ya comenté hace tiempo, en la que gracias al uso de la librería prototype, podemos generar ventanas muy elegantes y útiles. Es importante destacar que requiere la librería prototype aunque debería ser imprescindible para el desarrollo web en JS.

Puntuación: 5s.jpg

lightbox

Sin duda, la más famosa de todas, aunque la más pesada. El uso de scrip.aculo.us hace que en mi ranking pierda mucho puntos ya que hace de ella una herramienta muy pesada generando un tiempo de carga de página muy grande. Aunque tambien hay que decir que los efectos son geniales y consiguen enganchar al visitante.

Puntuación: 3s.jpg

greybox

Greybox es una librería javascript bastante conocida y la versión redux es una implementación usando la librería jQuery para minimizar el peso y por consiguiente el tiempo de carga de los proyectos en los que esté incluida. Una muy buena opción si quieres ajax e imagenes en tu proyecto. Además del uso de jQuery tenemos que sumarle 1.2kb que es el peso de la modificación (comparado con los 12kb del original, no esta nada mal).

Puntuación: 4s.jpg

thickbox

Otra implementación basada en Greybox que usa la librería jQuery para reducir su peso manteniendo su funcionalidad. Usando la versión comprimida de jQuery y ThickBox sumán un total de 20kb. Muy util y pequeño.

Puntuación: 4s.jpg

Por petición popular

lightbox

Muuuuy pequeño script (3kb) basado en Lightbox v1 que consigue gracias al uso de moo.fx como base de sus efectos un peso realmente envidiable ofreciendonos las mismas funcionalidades que los demás. Sin duda la mejor de todas en relación estética - peso -funcionalidad.

Puntuación: 5 Stars

Compártelo

« MODx otro CMS con Ajax, mucho Ajax
¡¡Chicos, os queremos más juntos!! »

Quizas te pueda interesar

42 Responses to “Lightbox solo fue el principio”

Pingback

Comentarios

1

Me ha gustado mucho el ThickBox, aunque todos son muy interesantes.. le hecharé un vistazo al tema :)

# Th3 ProphetMan -- 10/07/06 - 9:21 pm Responder
2

Faltó Litebox, lo mismo que Lightbox pero mucho menos pesado :).

# Christian -- 10/07/06 - 9:48 pm Responder
3

Excelente recopilación, y me adhiero a Christian, faltó LiteBox ;)

# leandono -- 10/07/06 - 11:09 pm Responder
4

Tremendos, yo me quedo con thickbox, da la impresion de no ser tan molesto para el usuario

# Erudite -- 11/07/06 - 6:55 am Responder
5

Ale!! Pesaos :P
Un saludo fieras :D

# anieto2k -- 11/07/06 - 7:10 am Responder
6

Sólo me haría falta una cosa para usar estos plugins cómdamente, y es editar la configuracion de las miniaturas que hace wordpress al subir iagenes a una entrada, esto se podrá modificar en algun sitio, no? poruqe en las opciones no lo he visto..

alguna idea de donde queda eso en los archivos del wp?

# Th3 ProphetMan -- 11/07/06 - 7:35 am Responder
7

creo que lo he encontrado (lineas 89 a 91 de inline-uploading.php)


$thumb = wp_create_thumbnail($file, 128);
elseif ( $imagedata['height'] > 96 )
$thumb = wp_create_thumbnail($file, 96);

# Th3 ProphetMan -- 11/07/06 - 7:43 am Responder
8

xDDDD
Te has delatado :D
No me lees xDD

Un saludo fiera :D

# anieto2k -- 11/07/06 - 8:12 am Responder
9

hmm esa entrada se me devió pasar.. jejej Eres un máquina tio :P
Pedazo arreglo al uploader y que bien queda el litebox :)
Ha quedado mas o menos así :) http://blog.moskis.net/trabajos-3d/ aunque me falta traducir las imagenes de los botones :D
Gracias por la ayuda!

# Th3 ProphetMan -- 11/07/06 - 10:44 am Responder
10

El lite box es muy weno y me gusta mucho la animación al cargar la imagen

El P. Window quizas tardar en cargar la imagenes, al principio no sabia de que trataba.

Habra que pulirlo más.

# Bnse -- 11/07/06 - 2:41 pm Responder
11

Perdón por resucitar el hilo, pero…

¿como de usable y accesible veis esto? ¿con tal de que degraden bien sin javascript es suficiente? Sería una putada que despues de hacer una web respetando todos los estandars la fuera a fastidiar con una tonteria de estas ;-)

# Rick -- 19/07/06 - 12:12 am Responder
12

Hombre, personalmente lightbox me parece muy usable y accesible.
Usable por que es muy intuitivo el hecho de pulsar sobre la imagen, y accesible por que en caso de no poder mostrar el contenido con efectos y demás adornos, te enlaza con la imagen grande.

Hay que pensar en accesibilidad y en usabilidad, pero tambien en regalarle al usuario que vé la página una web de cálidad y llamativa, asi que en mi opinión son muy buenas herramientas (lightbox por lo menos).

Por lo demás, ya va a gusto del consumidor :D

# anieto2k -- 19/07/06 - 12:17 am Responder
13

Uf, sufro con el litebox, no tengo ni la menor idea de como instalarlo y no encuentro ninguna explicacion APB (A Prueba de Boludos), la web del desarrollador dice que soltemos los javascripts directo a la carpeta js, pero ¿y el resto de ficheros?.

Saludos.

# Pande -- 24/07/06 - 11:23 am Responder
14

Buenas Pande, usarlo es bastante facil. Solo tienes que copiar los ficheros a la carpeta que quieras alojarlos y luego desde la cabecera enlazarlos.

Está bastante bien explicado en la web del autor. ¿Que quieres ponerlo en el blog?

# anieto2k -- 24/07/06 - 12:56 pm Responder
15

Hola Andrés:
Sí, me gustaría probarlo en mi blog, pero como te digo, no encontré demasiada info…..

# Pande -- 30/07/06 - 3:18 pm Responder
16

Adonde debería subirlos? Si los enlazo necesito poner todo el path o sólo la carpeta que he agregado….?

Perdón, pero soy de letras….

# Pande -- 30/07/06 - 3:33 pm Responder
17

A ver no es muy complicado, lo que has de hacer es ponerlos en la carpeta del theme y luego en el header linkarlos usando la función bloginfo de Wordpress linkas el JS de esta forma.


<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fichero.js“></script>
# anieto2k -- 30/07/06 - 8:51 pm Responder
18

Hola gente, tengo un problema y necesito resolverlo urgentemente.

He estado instalando slimbox y similares (utilizando mootools) y ninguno me funciona.

Lo pongo tal cual dice, con el js de mootools y el de slimbox, y el css y pongo el atributo rel en el enlace y ni caso, se abre la imagen como si nada pasara. A ver si alguien me puede ayudar porque me estoy volviendo loco, lo hago tal cual lo veo en los tutoriales y ejemplos mirando el código…

Muchas gracias.

# Resak -- 01/01/07 - 11:08 pm Responder
19

Excelente tu post, me ha servido para tener un panorama más acotado de las ofertas en cuanto a este tipo de scripts.
Soy diseñador gráfico y fotografo, te invito a pasar por mi blog…

Saludos cordiales desde Buenos Aires…

# Eduardo Cesario -- 21/01/07 - 9:47 pm Responder
20

Tengo un pequeño problema con esto. Intento usar lightbox, aunque esto me pasaría con cualquiera. La cuestión es que quiero hacer uso de el en una página que es incluida con ajax dentro de una capa en el index de mi web.

He probado a poner un enlace en el propio index y si vá, pero el cargador ajax, al meter la página en la capa pasa de los scripts.

Sabéis como solucionar esto?. Me está volviendo loco.

Saludos. Buen artículo.

# josek -- 14/03/07 - 8:44 am Responder
21

Excelente página

# Mauro -- 05/04/07 - 12:51 am Responder
22

Muy buenos recursos! muchas gracias por compartirlo :)
Me encanta el lightbox y los efectos que tiene para visualizar imágenes como “thumbnails”, es muy interesante y da un toque muy atractivo al diseño web,
saludos cordiales,
DiSeniorWeb.com

# DiSenior Web -- 22/08/07 - 5:48 am Responder
23

alguien sabe como hacer que el litebox muestre siempre el siguiente o anterior cuando hay mas de una imagen….
asi como lo hace trcikbox abajito????

saluds

# kanino -- 10/03/08 - 10:30 pm Responder
24

@kanino: Si te fijas en la página de Litebox te explican como hacer set de imagenes.


... rel="lightbox[example]” …

Con este código, todos los enlaces que lo contengan serán del set de “example”.

Saludos

# aNieto2k -- 10/03/08 - 11:03 pm Responder
25

Si gracias amigo eso ya lo se, lo que pido es que las imagenes NEXT y PREV se muestren siempre sin necesidad de hacer over sobre la imagen :)
ojala y te sepas la solucion man que no doy con ella :’(

# kanino -- 13/03/08 - 5:56 am Responder
26

lo solucione man sorry en el archivo css hay que dejar estas lineas….

#prevLink { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink { background: url(../images/nextlabel.gif) right 15% no-repeat; }

sin los hover para que se muestren :)
saludos

# kanino -- 13/03/08 - 6:52 am Responder

Deja un comentarioTop

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.

Esta web se encuentra sobre la licencia Creative Commons (Reconocimiento - Compartir igual) / Politicas de uso

Cerrar
Enviar por Correo