mirror of
https://github.com/serghey-rodin/vesta.git
synced 2024-12-26 05:51:13 -08:00
87 lines
3.1 KiB
HTML
87 lines
3.1 KiB
HTML
<!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="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>
|
|
<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'); });
|
|
|
|
var iv2 = $("#viewer2").iviewer(
|
|
{
|
|
src: "test_image2.jpg"
|
|
});
|
|
|
|
$("#chimg").click(function()
|
|
{
|
|
iv2.iviewer('loadImage', "test_image.jpg");
|
|
return false;
|
|
});
|
|
|
|
var fill = false;
|
|
$("#fill").click(function()
|
|
{
|
|
fill = !fill;
|
|
iv2.iviewer('fill_container', fill);
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
<link rel="stylesheet" href="../jquery.iviewer.css" />
|
|
<style>
|
|
.viewer
|
|
{
|
|
width: 50%;
|
|
height: 500px;
|
|
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>
|
|
<div id="viewer" class="viewer"></div>
|
|
<br />
|
|
<div id="viewer2" class="viewer" style="width: 80%;"></div>
|
|
<br />
|
|
<p>
|
|
<a href="#" id="chimg">Change Image</a>
|
|
<a href="#" id="fill">Fill container</a>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|