Lupa de aumento con jQuery

Si estas necesitando un buen plugin jQuery para la creación de una lupa de aumento en imágenes, entonces mlens es lo que estabas buscando.

mlens es un simple, pero potente plugin desarrollado con jQuery, para añadir una lupa a las imágenes de una manera sencilla y rápida. El plugin puede ser configurado fácilmente, cuenta con una serie de parámetros de configuración para implementarlo perfectamente a nuestros proyectos.

Ejemplo de uso:

Incluimos las bibliotecas necesarias:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>

HTML:

<img id="green_monster" src="images/GreenMonster_640px.jpg" 
alt="green monster graffiti by Kotzian" data-big="GreenMonster_1280px.jpg" />

CSS:

#green_wrapper {
	position: relative;
	width: 640px;
	height: auto;
	margin: 0 auto;
	border: 12px solid #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
	float: left;
}

JavaScript:

<script type="text/javascript">
$(document).ready(function()
{
	$("#green_monster").mlens(
	{
		imgSrc: $("#green_monster").attr("data-big"),	
		lensShape: "circle",				
		lensSize: 180,					
		borderSize: 4,					
		borderColor: "#fff",				
		borderRadius: 0	
	});
});
</script>

El plugin no tiene demasiadas complicaciones, les recomiendo visitar el sitio oficial en donde van a encontrar un ejemplo online en que los parámetros pueden ser modificados fácilmente de manera visual.

Web: mlens