i have image inside container and i have added zoom in/zoom out with pan. everything working good but have just one problem. when i move image from left to right side using mouse. it doesn't move completely in right side, still some part of image is hidden at left side of container, i mean image should move edge to edge like it's moving in up/down and left.
please check and suggest best possible solution.
var start_zoom = 2.0;
$("#imgpos").simplePan({
css:{},
centerImage: false,
mousewheel: true,
zoomAnimate: true,
initialZoom: start_zoom,
minZoom: start_zoom,
maxZoom : 10*start_zoom,
zoomDelta : 0.10,
});#imgpos{
width:460px;
height:184px;
background:#ccc;
display:block;
margin:auto;
overflow:hidden;
}
#imgpos > img{
height: 100%;
width: auto;
display:block;
margin:auto;
position: relative;
-webkit-transition: 500ms;
-moz-transition: 500ms;
transition: 500ms;
transform-origin: center top 0px;
left: 0;
top: 0;
bottom: auto;
right: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://dev.vsjodha.com/pan-script.js"></script>
<div class="set-imagebox" id="imgpos">
<img id="drag-image" src="http://dev.vsjodha.com/RadWraps/tower.jpg">
</div>