jQuery Featured Image Zoomer Plugin - multizoom.js

jQuery Featured Image Zoomer Plugin - multizoom.js
File Size: 1.13 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

multizoom.js is a easy jQuery plugin for displaying the magnified image when mouse hovers over to allow your users to get into more details. It supports multi zoom ,mousewheel zoom and can be used as a slidershow for showcasing your product images, photos, or other images.

Basic Usage:

1. Include jQuery library and multizoom.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="multizoom.js">

2. Call the plugin with options

<script type="text/javascript">

jQuery(document).ready(function($){

	$('#image1').addimagezoom({ // single image zoom
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'hayden.jpg' //<-- No comma after last option!
	})
	
})

</script>

3. Markup

<img id="image1" border="0" src="haydensmall.jpg" style="width:250px;height:338px">

4. More Options

descArea: '#description', // description selector (optional - but required if descriptions are used)
speed: 1500, // duration of fade in for new zoomable images (in milliseconds, optional)
descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional)
imagevertcenter: true, // zoomable image centers vertically in its container (optional)
magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional)
zoomrange: [3, 10],
magnifiersize: [250,250],
magnifierpos: 'right',
cursorshadecolor: '#fdffd5',
cursorshade: true,
disablewheel: true //<-- No comma after last option!

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.