I was trying to put a small icon / marker inside a big background image, and I wish that background image can be pan while zooming and also having multiple zoom level.
So far what I tried is like this, my default division size is 1363 x 900 which shows in the Dev Tools. By default my marker is placed on the edge of the screen here, default image without zoom Here is the screenshots default div size , after I click on the zoom functions of the panzoom , I saw that my image is get bigger , but i try to pan the marker into the edge of the image , it get stuck at the same x , y axis of my background image, after zooming image , I found that inside my Dev Tools , the size of the div is still the same , after zoom div size , how to change my div size also after I click on zoom ?? Is the panzoom causing the issues ??
The panzoom is from github , https://github.com/timmywil/panzoom , I am using this library.
This is the code how I do the panzoom and containment,
<body>
<div class="buttons">
<button class="zoom-out" onclick="zoomMinus()">-</button>
<button class="zoom-in" onclick="zoomAdd()">+</button>
<p id="zoomLevel">Zoom Level 1</p>
</div>
<section>
<div id="panzoom" style="text-align: center;" class="panZoom">
<img id="panzoomImg" src="{% static 'css/dist/img/photo4.jpg'%}" weight="1600" height="900"/>
</div>
</div>
<div id="draggable1" style="width: 150px; height: 150px; background-color: orange;" class="parent">
<div class="count"></div>
</div>
</section>
<section>
<div id="draggable" class="parent">
<div class="padMargin">
<!-- <div class="count"></div> -->
<p class="counter" id="counter">10</p>
<p class="counter1" id="counter1">20</p>
<p class="counter2" id="counter2">30</p>
<p class="counter3" id="counter3">40</p>
</div>
</section>
</body>
This is the jquery code :
$('#draggable1').draggable({
cursor: 'move',
containment: '#panzoomImg',
drag: function() {
var cont = $('#panzoomImg').offset();
var img = $(this).offset();
var x = img.left - cont.left
var y = img.top - cont.top
$('#draggable1').text('x-axis :' + x + ', y-axis :' + y);
}});
$(function () {
$("#draggable").draggable({
containment: "#panzoomImg",
scroll: false,
});
});
Did I do the code wrong ? Or I need a specified jquery to add the size of the div also ?? Thanks in advance , please do tell me if I did not provide any sufficient information. Appreciate !!~