Preview de imágenes en enlaces con jQuery

ByLuis

Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).

imagepreview.png

$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('' + $(link).text() + '').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});

New jQuery plugin: ‘imgPreview’

Similar Posts

GameJS: framework javascript para crear juegos 2D

ByLuis

GameJS es una librería javascript pensada para desarrollar juegos en 2D. Aunque no tiene mucha lógica realizar juegos en Javascript, sobre todo cuando en Flash pueden realizarse mucho mejor, esta librería es aún así bastante curiosa.
gamejs.png
Hace mucho uso de la etiqueta canvas, por lo que solo es posible usarla en los navegadores que lo soportan, posiblemente en IE también gracias a IECanvas, pero el rendimiento puede ser pobre. Dispone de varias clases de las que se hay extender para poder realizar nuestro juego.
GameJS
Vía / dzone

wForms: javascript para tus formularios

ByLuis

wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

  • Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
  • Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
  • Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

Vía / dzone

|

Picasa jQuery Plugin

ByLuis

A simple jQuery plugin to get albums and images from Picasa without the need for PHP, Ruby, or any other server side language. Makes it easy to create a simple, dynamic, free, client-side-only image gallery. …

Post original

|

IT Mill Toolkit: framework para crear GUIs

ByLuis

IT Mill Toolkit es un framework open source para crear interfaces de usuario, ofreciendo widgets y herramientas para desarrollar aplicaciones web de alta calidad. Podrás crear RIAs sin tener que preocuparte por imcompatibilidades de navegadores o el DOM de Javascript, tan solo usando herramientas Java.
itmill.png
Además ofrece varios widgets con soporte para AJAX, seguridad para evitar ataques mediante Javascript, está basado en Google Web Toolkit, faclidad para cambiar los estilos y muchas cosas más.
IT Mill Toolkit
Vía / WebAppers

Codetcha: CAPTCHA resolviendo Javascript

ByLuis

La verdad es que este CAPTCHA es muy friqui, pero es una idea interesante que quizás se pueda utilizar. Se trata de un CAPTCHA que en vez de tener que escribir una palabra, hay que modificar un código Javascript para que no tenga errores y así validar el formulario.
codetcha.png
Para pasar el CAPTCHA hay que eliminar todos los errores, se puede ir viendo si el código es correcto y si no es así, qué errores sigue habiendo. El código de Codetcha se puede usar para clases o ejemplos de Javascript, porque me da la sensación de que no es muy accesible este CAPTCHA.
Aún así la idea se podría sustituir usando matemáticas en vez de Javascript.
Codetcha

|

Añadir números de línea en highlight.js

ByLuis

Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.

El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.

document.addEventListener( 'DOMContentLoaded', () => {
	const prevHighligth = window.hljs.highlightBlock;
	window.hljs.highlightBlock = block => {
		const newline = '<span class="sw_new_line"></span>';
		// Replace all without regex
		block.innerHTML = block.innerHTML
			.split( newline )
			.join( '' );
		prevHighligth( block );
		if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
			block.innerHTML = newline +
				block
					.innerHTML
					.replace( /\n/g, `\n${ newline }` );
		}
	};
} );

¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.

Ahora toca explicar la parte CSS, para ello usaremos CSS counters.

pre code {
	counter-reset: linenumber;
}

pre code .sw_new_line::before {
	content: counter(linenumber, decimal-leading-zero);
	counter-increment: linenumber;
	padding-right: 15px;
	font-size: 0.8em;
	opacity: 0.6;
}