my_zoom.html

<style type="text/css"> 

#range {
    width:70%; 
    overflow:hidden;  
    position:relative;
    border: 1px solid black; 
       } 

#container-zoom { position:absolute; }

</style> 


<div id="range">
    <div id="container-zoom">
<img class="mapzoom target" data-zoom="0" src="./imagezoom.jpg" id="map-image"> 
    </div>
</div>

 

<br>
<a  href="javascript:void(0)" id="increase">more zoom +</a> 
<br><br>
<a  href="javascript:void(0)" id="decrease">reduce zoom -</a> 



<script   src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script   src="https://code.jquery.com/ui/1.7.2/jquery-ui.min.js"></script>
<script src="./rjszoom.js"></script>
<script>
	//The lib now only have one global var that is rjsZoom :)
	var myZoom = rjsZoom('#range', '#container-zoom', '#map-image');
	myZoom.initZoom();

	$('#increase').click(function(){
		myZoom.increaseZoom();
	});
	$('#decrease').click(function(){
		myZoom.decreaseZoom();
	});
	window.addEventListener("resize", function(){
			
	myZoom.initZoom();
	});

</script>
<!-- <script   src="./my_zoom.js"></script> -->