Tag Archives: rotate

Simple image (widget for) zoom, rotate?

By admin on | Leave a comment

Ref: https://github.com/can3p/iviewer

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

<!DOCTYPE html>
<html>
<head>
<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;
$(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’); });

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

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

Posted in: HTML, Javascript, JQuery, Rich-UI | Tagged: , , , , , ,