jQuery('selector').iZoom();
<img id="selector" src="link-to-your-photo" />
<img id="selector" src="link-to-your-photo" />
The plugin has several optional settings. Take a look here:
jQuery('selector').iZoom({
diameter: '200px', //set the loupe diameter
borderColor: '#bbb', // set the loupe border color
borderStyle: 'inset', // set the loupe border style
borderWidth: '1px' // set the loupe border width
});
diameter: '200px', //set the loupe diameter
borderColor: '#bbb', // set the loupe border color
borderStyle: 'inset', // set the loupe border style
borderWidth: '1px' // set the loupe border width
});
By default, the loupe has diameter 150 pixels, border color #ccc and border style inset. I put here a few demos:
jQuery('#myPic1').iZoom({
diameter: '200px'
});
<img id="myPic1" src="00507_macroant_1680x1050.jpg" />
diameter: '200px'
});
<img id="myPic1" src="00507_macroant_1680x1050.jpg" />
jQuery('#myPic2').iZoom({
borderColor: 'green',
borderWidth: '3px'
});
<img id="myPic2" src="00507_macroant_1680x1050.jpg" />
borderColor: 'green',
borderWidth: '3px'
});
<img id="myPic2" src="00507_macroant_1680x1050.jpg" />
jQuery('#myPic3').iZoom({
borderColor: '#f00',
borderWidth: '3px',
borderStyle: 'double'
});
<img id="myPic3" src="00507_macroant_1680x1050.jpg" />
borderColor: '#f00',
borderWidth: '3px',
borderStyle: 'double'
});
<img id="myPic3" src="00507_macroant_1680x1050.jpg" />
The plugin is compatible with IE 6+, Firefox, Safari, Opera, Chrome and probably other browsers.
Grab the latest version. Choose your compression level:
- production (minified)
- development (uncompressed code)