JQueryLens is a JQuery component that allows to place a lens over a given image.
You can see an example of use in the "sample" folder. As you can see in the index.html, we have a specific div structure to get the lens component properly working; we expect to minimize this sort of dependency in further versions of the component.
<!-- we can to change the ids of divs inside of body (considering that later we have to change the ids in the css) --><!DOCTYPE html><html><head><metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"><linkrel="stylesheet" type="text/css" href="css/reset.css"><linkrel="stylesheet" type="text/css" href="css/style.css"><scriptsrc="../vendor/jquery-1.7.1.min.js" type="text/javascript"></script><scriptsrc="../js/JQueryLens.js" type="text/javascript"></script><title>JQueryLens Sample</title></head><body><divid="thumbnail" class="resize"><imgsrc="img/image.jpg" alt="imagen" /><divid="locator"></div></div><divid="lens"><imgid="view" src="img/image.jpg" alt="imagen" /></div></body></html>We also provide a CSS stylesheet file for the example, although further versions of the component are expected to work properly with no stylesheet.
/* in this file we will specify the ids names corresponding to "index.html", also we can to change the position (left, top), size (width, height) and border of 3 divs and image included (#lens img) */#thumbnail
{
border:0px solid rgba(0,0,0,1);
left:40px;
position: absolute;
top:40px;
width:400px;
}
#lens
{
border:0px solid rgba(0,0,0,1);
height:600px;
left:500px;
overflow: hidden;
position: absolute;
top:40px;
width:800px;
}
#lensimg
{
height:1200px;
position: absolute;
width:1600px;
}
#locator
{
background-color:rgba(255,255,255,0.5);
border:0px solid rgba(0,0,0,0.5);
cursor: pointer;
left:0px;
position: absolute;
top:0px;
}
.resizeimg
{
height:100%;
position: relative;
width:100%;
}Finally, you can change some behaviour of the component in the js/JQueryLens.js file, which in the end has the following snippet of code:
$(document).ready(function(){JQueryLens.init({zoom: 4});JQueryLens.thumbnail.mousemove(function(e){JQueryLens.refreshLocatorInThumbnail(e.pageX,e.pageY);});});In further versions of the component, we expect to simplify this function to a unique call to the init() method that you can do inside your own html files. Currently, supported parameters for the init() method are:
- zoom: proportion between real image and lens frame; default value is 4
- locator: id of the lens locator div
- thumbnail: id of the lens thumbnail div
- lens: id of the lens div