• jQuery axuploader
• jquery ax-zoomer
• phpDay
• Some web site
• Fine Zoom
• Smooth Map Zoom

AX-ZOOMER

What is this?

AX-ZOOMER is a simple jquery plugin for zooming images with mousewheel at different level of zoom. There are many jquery zoom plugin around the web, I can mention Cloud Zoom(my preffered), shiftZoom with cool effects, but I never founded a simple zoom plugin, just for making simple zoom using mousewheel at different levels of zoom.

ax-zoomer applies to IMG html tag with no more requirment. Zoom on image can be done simply by using mousewheel (like google maps), or just by pressin the zoomIn, zoomOut buttons. Once image is in zoom mode, it can be draged (paned for touches devices).

1. Download
2. How to use
3. Options
4. Methods
5. Example

Featues

• Unlimited level of zoom
• Mousewheel optional
• Webkit compatible
• 1 finger drag, pan the image in the zoom mode
• 2 fingers pinch , zoom in , zoom out the image
• Controls buttons with custom position
• destroy,enable,disable,option methods
• shift+click Zoom In
• alt+click Zoom Out
• Compatible with IE6+, FF 1.5+,Google Chrome, Safari, Opera
• Free, open

Download axzoomer v1.5

Full source here. Minfield version (compressed with YUI compressor)here.

How to use?

1. Load jQuery, ax-zoomer and optionally jQueryMousewheel javascript files:

   		<script src="jslibs/jquery.js" type="text/javascript"></script> 	
   		<script src="jslibs/axzoomer.js" type="text/javascript"></script>
   		//optional
   		<script src="jslibs/jquery.mousewheel.js" type="text/javascript"></script> 
   		

2. Now just apply ax-zoomer to your set of image (every where in your document), by using classic jquery selectors:

   		$('.myimages').axzoomer({
   			'maxZoom':4,
   			'zoomIn':'zoom-in.png',
   			'zoomOut':'zoom-out.png',
   			'opacity':0.5,
   			'sensivity':10
   		});
   		

3. Optionally you can specifie two source for your image, the low resolution one, and the high resolution one to be used in zoom mode. If the high resolution source (src-big) is not set then the normal source will be used in the zoom mode.

   		 <img src="audi.jpg" src-big="audi-big.jpg" class="myimages" />		

4. Optionally you can also specifie the #ID or jQuery identifier of the DOM element which can do zoom in and zoom out:

    		<img title="zoomOut:$('#zoomOutbutt'), zoomIn:$('#zoomInbutt')" src="audi.jpg" src-big="audi-big.jpg" class="myimages" />
   <input type="button" id="zoomInbutt" value="My Custom zoomIn" />
   <input type="button" id="zoomOutbutt" value="My Custom zoomOut" />
   		

   This options if specified in the image tag, will automatically override and hide the zoomIn and zoomOut buttons over the image.
5. All options can be specified globally when call the axzoomer or can be specified by single image on the title tag:

     		<img title="'maxZoom':8,'srcBig':'audi-big.jpg'" src="audi.jpg" class="myimages" />  		

Options:

Option	Type	Default	Description
maxZoom	Float	4	Set the max zoom level of the image.
zoomIn	String, Object	zoomin.png	The source of image icon to be used as zoom in icon over the image. Or can be set an dom element to be used as zoom in button on click. In this case it bind zoom In function on the click event. .
zoomOut	String, Object	zoomout.png	A string of the image source to be used as zoomOut button icon. If given as object, a dom element or a jQuery selector that bind zoom out on click.
reset	String, Object	reset.png	A string of the image source to be used as reset button icon. If given as object, a dom element or a jQuery selector that bind reset function to click.
showControls	boolean	true	If true the zoom buttons appears, if false no zoom buttons are displayed.
controlsPos	array	['right','bottom']	1) an array containing an x,y coordinate pair in pixel offset from left, top corner of image (e.g. [350,100]). 2) an array containing x,y position string values ['right/left','top/bottom'] (e.g. ['right','top'] for top right corner).
opacity	float[0-1]	1	Set the toolbar opacity/transparency.
sensivity	Int	10	Set the zoom scale sensivity. Bigger value less sensitiv, smaller value more sensitive
overrideMousewheel	boolean	true	If true Override mousewheel event when using in combination with other plugins that use mousewheel (ex. fancybox changes image on mousewheel).
mousewheel	boolean	true	If true zoom in, zoom out can be done with the mousewheel if mousewheel plugin is loaded.
resetImage	Boolean	false	If true on zoom reset or on zoom level 1 the original image will be shown. If false after first zoom will be used always the high resolution image.

Methods:

Method	Description	Example
destroy	Destroys the zoomer and returns image to original state.	$('.demo').axzoomer('destroy')
option	Set or get the options of the zoomer.	getter: $('.demo').axzoomer('option',maxZoom) setter:$('.demo').axzoomer('option',maxZoom,9)
enable	Enable the plugin.	$('.demo').axzoomer('enable')
disable	Disables the plugin or the zoom.	$('.demo').axzoomer('disable')

Examples

Use the mouse wheel over the image, and see the effect:

Demo
<img src-big="assets/albania_high.jpg" src="assets/albania_low.jpg" class="demo" /> $('.demo').axzoomer();
<a id="single_image" href="assets/albania2_high.jpg"> <img src="assets/albania2_low.jpg" alt=""/> </a> $("a#single_image").fancybox({ onComplete:function() { $('#fancybox-img').axzoomer(); } });

For suggestions, issues, feel free to contact me at: albanx[at]gmail.com. ([at]=@)

Let your comment here