avinashdhongade
New Member
Problem statement:I want to have a screen space with a background image in a div and another image over the background image. The image which is above the background image should be draggable and resizeable AND it should automatically resize to the percentage zoom of the background image when i add it. Also, the background and the other image should zoom in and out proportionately.Please HELP!My approach:There are two divs.One div has an image which acts as its background.Second div has another image which is draggable. What i cant do is to sync both these divs so that they can zoom in and out proportionately.THANK YOU IN ADVANCE 
\[code\]<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.iviewer test</title> <link href="http://stackoverflow.com/questions/13777150/jquery.iviewer.css" rel="stylesheet" type="text/css" /ss> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jquery.js" ></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jqueryui.js" ></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jquery.mousewheel.min.js" ></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jquery.iviewer.js" ></script> <script type="text/javascript"> var $ = jQuery; $(document).ready(function(){ var iv1 = $("#viewer").iviewer({ src: "meditation.png", update_on_resize: true, zoom_animation: true, mousewheel: true, onMouseMove: function(ev, coords) { }, onStartDrag: function(ev, coords) { return false; }, //this image can 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'); }); }); </script> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/13777150/common/common.css"/> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/core.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/events.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/css.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/coordinates.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/drag.js"></script> <script language="JavaScript"><!-- window.onload = function() { var group var coordinates = ToolMan.coordinates() var drag = ToolMan.drag() var boxDrag = document.getElementById("boxDrag") drag.createSimpleGroup(boxDrag) var boxVerticalOnly = document.getElementById("boxVerticalOnly") group = drag.createSimpleGroup(boxVerticalOnly) group.verticalOnly() var boxHorizontalOnly = document.getElementById("boxHorizontalOnly") group = drag.createSimpleGroup(boxHorizontalOnly) group.horizontalOnly() var boxRegionConstraint = document.getElementById("boxRegionConstraint") group = drag.createSimpleGroup(boxRegionConstraint) var origin = coordinates.create(0, 0) group.addTransform(function(coordinate, dragEvent) { var originalTopLeftOffset = dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition) return coordinate.constrainTo(origin, originalTopLeftOffset) }) var boxThreshold = document.getElementById("boxThreshold") group = drag.createSimpleGroup(boxThreshold) group.setThreshold(25) var boxHandle = document.getElementById("boxHandle") group = drag.createSimpleGroup(boxHandle, document.getElementById("handle")) var boxAbsolute = document.getElementById("boxAbsolute") group = drag.createSimpleGroup(boxAbsolute) group.verticalOnly() group.addTransform(function(coordinate, dragEvent) { var scrollOffset = coordinates.scrollOffset() if (coordinate.y < scrollOffset.y) return coordinates.create(coordinate.x, scrollOffset.y) var clientHeight = coordinates.clientSize().y var boxHeight = coordinates._size(boxAbsolute).y if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight)) return coordinates.create(coordinate.x, (scrollOffset.y + clientHeight) - boxHeight) return coordinate }) } </script> <link rel="stylesheet" href="http://stackoverflow.com/jquery.iviewer.css" /> <style> .viewer { width: 75%; height: 800px; border: 1px solid black; position: relative; overflow:scroll; } .wrapper { overflow: hidden; } div { margin: 0px; padding: 0px; } .verticalgridline { padding-top: 27px; } .box { float: left; padding: 0px; } #boxDrag, #boxVerticalOnly, #boxHorizontalOnly, #boxRegionConstraint, #boxThreshold, #boxAbsolute { cursor: move; } #boxAbsolute { position: absolute; bottom: 0px; right: 0px; } </style> </head> <body> <h1>Design Page</h1> <!-- wrapper div is needed for opera because it shows scroll bars for reason --> <div class="wrapper"> <div id="viewer" class="viewer" > <div id="boxDrag" class="box"> <img src="http://stackoverflow.com/questions/13777150/4.png" /> </div> </div> </div> </body></html>\[/code\]
\[code\]<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.iviewer test</title> <link href="http://stackoverflow.com/questions/13777150/jquery.iviewer.css" rel="stylesheet" type="text/css" /ss> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jquery.js" ></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jqueryui.js" ></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jquery.mousewheel.min.js" ></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13777150/jquery.iviewer.js" ></script> <script type="text/javascript"> var $ = jQuery; $(document).ready(function(){ var iv1 = $("#viewer").iviewer({ src: "meditation.png", update_on_resize: true, zoom_animation: true, mousewheel: true, onMouseMove: function(ev, coords) { }, onStartDrag: function(ev, coords) { return false; }, //this image can 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'); }); }); </script> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/13777150/common/common.css"/> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/core.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/events.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/css.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/coordinates.js"></script> <script language="JavaScript" type="text/javascript" src="http://stackoverflow.com/questions/13777150/drag.js"></script> <script language="JavaScript"><!-- window.onload = function() { var group var coordinates = ToolMan.coordinates() var drag = ToolMan.drag() var boxDrag = document.getElementById("boxDrag") drag.createSimpleGroup(boxDrag) var boxVerticalOnly = document.getElementById("boxVerticalOnly") group = drag.createSimpleGroup(boxVerticalOnly) group.verticalOnly() var boxHorizontalOnly = document.getElementById("boxHorizontalOnly") group = drag.createSimpleGroup(boxHorizontalOnly) group.horizontalOnly() var boxRegionConstraint = document.getElementById("boxRegionConstraint") group = drag.createSimpleGroup(boxRegionConstraint) var origin = coordinates.create(0, 0) group.addTransform(function(coordinate, dragEvent) { var originalTopLeftOffset = dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition) return coordinate.constrainTo(origin, originalTopLeftOffset) }) var boxThreshold = document.getElementById("boxThreshold") group = drag.createSimpleGroup(boxThreshold) group.setThreshold(25) var boxHandle = document.getElementById("boxHandle") group = drag.createSimpleGroup(boxHandle, document.getElementById("handle")) var boxAbsolute = document.getElementById("boxAbsolute") group = drag.createSimpleGroup(boxAbsolute) group.verticalOnly() group.addTransform(function(coordinate, dragEvent) { var scrollOffset = coordinates.scrollOffset() if (coordinate.y < scrollOffset.y) return coordinates.create(coordinate.x, scrollOffset.y) var clientHeight = coordinates.clientSize().y var boxHeight = coordinates._size(boxAbsolute).y if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight)) return coordinates.create(coordinate.x, (scrollOffset.y + clientHeight) - boxHeight) return coordinate }) } </script> <link rel="stylesheet" href="http://stackoverflow.com/jquery.iviewer.css" /> <style> .viewer { width: 75%; height: 800px; border: 1px solid black; position: relative; overflow:scroll; } .wrapper { overflow: hidden; } div { margin: 0px; padding: 0px; } .verticalgridline { padding-top: 27px; } .box { float: left; padding: 0px; } #boxDrag, #boxVerticalOnly, #boxHorizontalOnly, #boxRegionConstraint, #boxThreshold, #boxAbsolute { cursor: move; } #boxAbsolute { position: absolute; bottom: 0px; right: 0px; } </style> </head> <body> <h1>Design Page</h1> <!-- wrapper div is needed for opera because it shows scroll bars for reason --> <div class="wrapper"> <div id="viewer" class="viewer" > <div id="boxDrag" class="box"> <img src="http://stackoverflow.com/questions/13777150/4.png" /> </div> </div> </div> </body></html>\[/code\]