Back to article


Note - If you are using IE 8 or lower than you will see a square lens

Demo 1 - Default lens

$("#img_01").imageLens();

Demo 2 - Custom lens size

$("#img_02").imageLens({ lensSize: 200 });

Demo 3 - Custom image source

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

Demo 3a - Custom image source (colors, to test IE8 'lag')

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

Demo 4 - Other lens properties

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

Demo 5 - HTML5 data-attribute

$("#img_05").imageLens({});
html
<img id="img_05" src="sample01.jpg" data-src-full="sample01.jpg" width="384" height="240" alt="" />

Image courtesy http://www.smashingmagazine.com/