Iviewer - Image view control with zoom and move

jQuery iviewer is an jQuery UI widget responsible for image view control with zoom control and a possibility to move image in area by the mouse.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../jquery.iviewer.css" />
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jqueryui.js" ></script>
<script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
<script type="text/javascript" src="../jquery.iviewer.js" ></script>

2. HTML

<span>
	<a id="in" href="#">+</a>
	<a id="out" href="#">-</a>
	<a id="fit" href="#">fit</a>
	<a id="orig" href="#">orig</a>
	<a id="update" href="#">update</a>
</span>
<div id="viewer" class="viewer"></div>

3. JAVASCRIPT

$(document).ready(function(){
	var iv1 = $("#viewer").iviewer({
		src: "test_image.jpg",
		update_on_resize: false,
		zoom_animation: false,
		mousewheel: false,
		onMouseMove: function(ev, coords) { },
		onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
		onDrag: function(ev, coords) { }
	});

	$("#in").click(function(){ iv1.iviewer('zoom_by', 1); });
	$("#out").click(function(){ iv1.iviewer('zoom_by', -1); });
	$("#fit").click(function(){ iv1.iviewer('fit'); });
	$("#orig").click(function(){ iv1.iviewer('set_zoom', 100); });
	$("#update").click(function(){ iv1.iviewer('update_container_info'); });
});

4. OPTIONS

 /**
* start zoom value for image, not used now
* may be equal to "fit" to fit image into container or scale in %
**/
zoom: "fit",
/**
* base value to scale image
**/
zoom_base: 100,
/**
* maximum zoom
**/
zoom_max: 800,
/**
* minimum zoom
**/
zoom_min: 25,
/**
* base of rate multiplier.
* zoom is calculated by formula: zoom_base * zoom_delta^rate
**/
zoom_delta: 1.4,
/**
* whether the zoom should be animated.
*/
zoom_animation: true,
/**
* if true plugin doesn't add its own controls
**/
ui_disabled: false,
/**
 * If false mousewheel will be disabled
 */
mousewheel: true,
/**
* if false, plugin doesn't bind resize event on window and this must
* be handled manually
**/
update_on_resize: true,
/**
* whether to provide zoom on doubleclick functionality
*/
zoom_on_dblclick: true,
/**
* if true the image will fill the container and the image will be distorted
*/
fill_container: false,
/**
* event is triggered when zoom value is changed
* @param int new zoom value
* @return boolean if false zoom action is aborted
**/
onZoom: jQuery.noop,
/**
* event is triggered when zoom value is changed after image is set to the new dimensions
* @param int new zoom value
* @return boolean if false zoom action is aborted
**/
onAfterZoom: jQuery.noop,
/**
* event is fired on drag begin
* @param object coords mouse coordinates on the image
* @return boolean if false is returned, drag action is aborted
**/
onStartDrag: jQuery.noop,
/**
* event is fired on drag action
* @param object coords mouse coordinates on the image
**/
onDrag: jQuery.noop,
/**
* event is fired on drag stop
* @param object coords mouse coordinates on the image
**/
onStopDrag: jQuery.noop,
/**
* event is fired when mouse moves over image
* @param object coords mouse coordinates on the image
**/
onMouseMove: jQuery.noop,
/**
* mouse click event
* @param object coords mouse coordinates on the image
**/
onClick: jQuery.noop,
/**
* mouse double click event. If used will delay each click event.
* If double click event was fired, clicks will not.
*
* @param object coords mouse coordinates on the image
**/
onDblClick: null,
/**
* event is fired when image starts to load
*/
onStartLoad: null,
/**
* event is fired, when image is loaded and initially positioned
*/
onFinishLoad: null,
/**
* event is fired when image load error occurs
*/
onErrorLoad: null