jMagnify plugin: documentation and demo page

Demo 1 - Standard options

Hover text below to see jMagnify in action!

This is the javascript code to launch jMagnify with standard options:

$().ready(function() {
	$('#first').jMagnify();
});
				

Demo 2 - jMagnify text color demo (in a A element)

Hover text below to see jMagnify in action!

This is the javascript code to launch jMagnify text color demo:

$().ready(function() {
	$('#second').jMagnify({
		centralEffect: {'color': 'yellow'},
		lat1Effect: {'color': 'orange'},
		lat2Effect: {'color': 'red'},
		lat3Effect: {'color': 'magenta'},
		resetEffect: {'color': 'black'}
	});
});
				

Demo 3 - jMagnify background-color demo

Hover text below to see jMagnify in action!

This is the javascript code to launch jMagnify background-color demo:

$().ready(function() {
	$('#third').jMagnify({
		centralEffect: {'background-color': '#FFFF00'},
		lat1Effect: {'background-color': '#FFFF44'},
		lat2Effect: {'background-color': '#FFFF88'},
		lat3Effect: {'background-color': '#FFFFCC'},
		resetEffect: {'background-color': 'white'}
	});
});
				

Demo 4 - jMagnify character box demo

Hover text below to see jMagnify in action!

This is the javascript code to launch jMagnify character box demo:

$().ready(function() {
	$('#fourth').jMagnify({
		centralEffect: {'border': '4px solid red', 'font-size': '200%'},
		lat1Effect: {},
		lat2Effect: {},
		lat3Effect: {},
		resetEffect: {'border': '0', 'font-size': '100%'}
	});
});
				

Demo 5 - jMagnify border-bottom demo

Hover text below to see jMagnify in action!

This is the javascript code to launch jMagnify border-bottom demo:

$().ready(function() {
	$('#double').jMagnify({
		centralEffect: {'border-bottom': '4px solid red'},
		lat1Effect: {'border-bottom': '3px solid red'},
		lat2Effect: {'border-bottom': '2px solid red'},
		lat3Effect: {'border-bottom': '1px solid red'},
		resetEffect: {'border': '0'}
	});
});