Simple image (widget for) zoom, rotate?


Here is an example (only zoom, fit etc.. for rotate see iviewer website):

<!DOCTYPE html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>jquery.iviewer test</title>
<script type=”text/javascript” src=”imgtest/jquery.js” ></script>
<script type=”text/javascript” src=”imgtest/jqueryui.js” ></script>
<script type=”text/javascript” src=”imgtest/jquery.ui.core.js” ></script>
<script type=”text/javascript” src=”imgtest/jquery.mousewheel.min.js” ></script>
<script type=”text/javascript” src=”imgtest/jquery.iviewer.js” ></script>
<script type=”text/javascript”>
var $ = jQuery;
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’); });

iv1.iviewer(‘loadImage’, “imgtest/test_image2.jpg”);
return false;
<link rel=”stylesheet” href=”imgtest/jquery.iviewer.css” />
width: 80%;
height: 800px;
border: 1px solid black;
position: relative;

overflow: hidden;
<h1>JQuery.iviewer test</h1>
<!– wrapper div is needed for opera because it shows scroll bars for reason –>
<div class=”wrapper”>
<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>
<a href=”#” id=”chimg”>Change Image</a>
<div id=”viewer” class=”viewer”></div>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: