: 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

Litebox Plugin para Wordpress

8 de Marzo de 2007 | 3 Comentarios |

Comparte este Artículo

Cerrar

Marcadores Sociales
E-mail

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

En potaje.net utilizo una mezcla de javascript y CSS para mostrar las imágenes cuando clicas sobre sus miniaturas.

En el principio de los tiempos llamaba a las librerías lightbox JS v2.0 en la cabecera y me monté mi propio CSS. Eso fue hasta que me enteré que había un plugin para Wordpress que utilizaba las misma librerías, el Lightbox 2 plugin. Y lo he venido utilizando hasta ahora.

Recientemente he descubierto una modificación de estas librerías que vienen a hacer lo mismo pero son mucho más ligeras: Litebox.

Y de nuevo alguien monta el plugin para Wordpress. Desde GavinBarker podéis descarga el Litebox plugin para Wordpress.

La diferencia de tamaño entre los dos es bastante considerable. Stimuli-lightbox2 ocupa 192 Kb descompactado en plugins/ y Litebox plugin solo 36 Kb. El truco: utiliza la librería de efectos moo.fx, de tan solo 3 Kb.

Bien. Está en fase de pruebas. Todavía tengo el antiguo plugin en el directorio /plugins por si acaso, pero por ahora tiene muy buena pinta. Como he leído por alguna parte, "lo mismo pero con menos calorías".

Avisadme si notáis algo raro.

Artículos Relacionados: Habilitar Cursores en Litebox Plugin para Wordpress

Añadir Botones a TinyMCE

6 de Octubre de 2006 | 10 Comentarios |

Comparte este Artículo

Cerrar

Marcadores Sociales
E-mail

categorias: Internet y Weblogs, Software
etiquetas: Hack, JavaScript, Software, Wordpress

TinyMCE es un editor WYSIWYG basado en HTML y Javascript bastante extendido. Wordpress lo utiliza pero, por defecto, sólo muestra una barra de botones reducida. Durante semanas he intentado encontrar un plugin (Advanced WYSISWYG Editor, Editor onkey WYSIWYG, Xinha, …) para ampliar los botones y las herramientas de TinyMCE, pero ninguno acababa de funcionar del todo bien. Así que he acabado tocando directamente el código PHP del editor. La modificación es más sencilla de lo que esperaba.

Wordpress muestra la barra de botones de su editor definida en el fichero \wp-includes\js\tinymce\tiny_mce_gzip.php. En las lineas 127, 129 y 131 se definen los arrays que contienen las etiquetas de los botones a mostrar en las tres barras.

[…]
127 $mce_buttons = apply_filters(’mce_buttons’, array(’bold’, ‘italic’, ’strikethrough’, ’separator’, ‘bullist’, ‘numlist’, ‘outdent’, ‘indent’, ’separator’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’ ,’separator’, ‘link’, ‘unlink’, ‘image’, ‘wordpress’, ’separator’, ‘undo’, ‘redo’, ‘code’, ‘wphelp’));
128 $mce_buttons = implode($mce_buttons, ‘,’);
129 $mce_buttons_2 = apply_filters(’mce_buttons_2′, array());
130 $mce_buttons_2 = implode($mce_buttons_2, ‘,’);
131 $mce_buttons_3 = apply_filters(’mce_buttons_3′, array());
132 $mce_buttons_3 = implode($mce_buttons_3, ‘,’);
133 $mce_browsers = apply_filters(’mce_browsers’, array(’msie’, ‘gecko’, ‘opera’));
[…]

Sólo hay que modificar (recuerda hacer una copia de seguridad) los arrays $mce_buttons, $mce_buttons_2 y $mce_buttons_3, añadiendo los diferentes botones disponibles:

bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument, separator.

Si tras la modificación, tu editor no muestra los botones correctamente seguramente es por alguna falta ortográfica en las etiquetas o por algún problema con las comillas simples o las comas.