I'm trying to have an image in a modal, zoom within its container at the position it was clicked but also have the image wrapper have overflow hidden so the extra part of the image doesn't extend out (like Amazon's zoom in the zoom modal https://www.amazon.com/gp/product/B01L8O0CRC).
I have searched through SO and I'm basing my code on UPDATE 3: https://stackoverflow.com/a/27611642 I made some modifications so it is using jQuery.
The problem that I'm having is when the photo is in a modal, it always "pans left" no matter where you click, but outside of the modal it works fine. And it also does seem to work in SO's popup, but doesn't work when I run the whole thing from an HTML file.
I would also like to pan the image around once it's in "zoom" mode on mouse over but not sure how to do that.
The reason why I'm not using a third party plugin is I have a lot of various things going on that no one plugin would have fulfilled all of my needs.
Thank You.
$(document).ready(function(){
var current = {x: 0, y: 0, zoom: 1};
$(document).on("click","#modal-zoom-photo",function(e){
if(current.zoom > 1){
current = {x: 0, y: 0, zoom: 1};
$(this).removeClass().addClass("zoom-in-cursor");
}
else{
$(this).removeClass().addClass("zoom-out-cursor");
var coef = e.shiftKey || e.ctrlKey ? 0.5 : 2,
delm = document.documentElement,
oz = current.zoom,
nz = current.zoom * coef,
sx = delm.scrollLeft,
sy = delm.scrollTop,
ox = 50 + 21,
oy = 50 + 22,
mx = e.clientX - ox + sx,
my = e.clientY - oy + sy,
ix = (mx - current.x) / oz,
iy = (my - current.y) / oz,
nx = ix * nz,
ny = iy * nz,
cx = (ix + (mx - ix) - nx),
cy = (iy + (my - iy) - ny)
;
current.zoom = nz;
current.x = cx;
current.y = cy;
}
$(".modal-zoom-large-photo-wrap").css({
'-webkit-transform' : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
'-moz-transform' : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
'-ms-transform' : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
'-o-transform' : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')',
'transform' : 'translate('+current.x+'px, '+current.y+'px) scale(' + current.zoom + ')'
});
return false;
});
}); .modal-zoom-large-photo-wrap img{
margin:0 auto;
max-height:500px;
}
.modal-zoom-large-photo-wrap{
text-align:center;
height:520px;
overflow:hidden;
width: 100%;
}
.wrapped{
position: relative;
width:500px;
height:500px;
overflow:hidden;
}
.absolute{position: absolute;}
.modal-zoom-large-photo-wrap{
position: absolute;
width: 100%;
height: 100%;
transform-origin: 0 0 0;
transition: transform 0.3s;
transition-timing-function: ease-in-out;
transform: translate(0,0) scale(1);
}
.zoom-out-cursor{
cursor:zoom-out;
}
.zoom-in-cursor{
cursor:zoom-in;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#myModal" role="button" class="btn btn-primary btn-lg" data-toggle="modal">Open Modal</a>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">TITLE</h3>
</div>
<div class="modal-body">
<div class="wrapped">
<div class="modal-zoom-large-photo-wrap">
<div class="absolute">
<a id="modal-zoom-photo" class="zoom-in-cursor" href="#"><img class="margin-bottom img-responsive" src="https://placeimg.com/1024/640/animals"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>