: potaje.net

Habilitar Cursores en Litebox Plugin para Wordpress

16 de Marzo de 2007 | 5 Comentarios |

Marcadores Sociales
E-mail

categorias: Internet y Weblogs, Software
etiquetas: actualizacion, JavaScript, lightbox, litebox, plugin, Software, Wordpress

Comentaba la semana pasada que potaje.net había cambiado el fantástico plugin Lightbox 2 por el ultraligero Litebox (36 Kb).

Originalmente este plugin no está preparado para navegar por los grupos de imágenes (sets) mediante las teclas de cursor izquierda y derecha, y tan sólo vienen habilitadas las teclas p (previous) y n (next). Habilitar las teclas de cursor para la navegación no es complicado -retocando el fichero litebox-1.0.js en /plugins/gblitebox/js/- aunque hay que estar alerta en no romper el flujo.

Alrededor de la linea 422 del fichero litebox-1.0.js se definen las teclas posibles para cerrar la ventana pop-up litebox y a partir de la linea 424 (basándonos en la versión 1.0 del 07/03/06) se definen las teclas de navegación y su comportamiento. Para habilitar las teclas de los cursores izquierda y derecha añadiremos los códigos de estas teclas (37 y 39) en las funciones if ya definidas para previous y next.

Detrás de key == ‘p’ añadiremos || keycode == 37 para habilitar el cursor izquierda. Detrás de key == ‘n’ añadiremos || keycode == 39 para habilitar el cursor derecha.

El nuevo código quedaría de la siguiente manera:


if((key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
		myLightbox.end();
	} else if(key == 'p' || keycode == 37){	// display previous image
		if(activeImage != 0){
			myLightbox.disableKeyboardNav();
			myLightbox.changeImage(activeImage - 1);
		}
	} else if(key == 'n' || keycode == 39){	// display next image
		if(activeImage != (imageArray.length - 1)){
			myLightbox.disableKeyboardNav();
			myLightbox.changeImage(activeImage + 1);
		}
	}
},

Artículos Relacionados: Litebox Plugin para Wordpress