I'm currently working on a project where I want to implement zoom in and out functionality for an image using a JQuery UI slider. However, I'm facing two main issues that need fixing. Firstly, I need the image to stay centered while it zooms in and out. Secondly, there are instances when the image scales smaller instead of larger due to mathematical calculation errors. How can I resolve these issues effectively?
You can view the code here.
Here's the HTML:
<div class="zoom-me">
<img src="http://theartmad.com/wp-content/uploads/Happy-Fairy-Tail-Wallpaper-5.jpg">
</div>
</div>
<div id="range5"></div>
Here's the CSS:
img {
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width:200%;
}
.zoom-me {
background-color: blue;
overflow: hidden;
border: 10px solid white;
max-width: 400px;
width: 400px;
position: relative;
display: block;
margin: 0 auto;
height: 260px;
}
#range5 {
position: absolute;
width: 300px;
top: 75%;
left: 20%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 0;
height: 13px;
-webkit-border-radius: 0%;
border-radius: 0%;
background: #e6e7e8;
outline: none;
}
#range5 .ui-slider-handle{
position: absolute;
margin: -18px 0 0 -9px;
-webkit-border-radius: 0%;
border-radius: 0%;
background: #0B5788;
border: 0;
height: 20px;
width: 11px;
outline: none;
cursor: pointer;
}
#range5 .ui-slider-range{
background: #0d78bd;
height: 13px;
}
And here's the JS:
$('#range5').slider({
range: 'min',
max: 500,
step: 100,
value: 50,
slide: function (e, ui) {
var cv = $('#range5').slider( "value" );
$('img').animate({
width: 200 - cv/5 + "%",
height: 200 - cv/5 + "%"},500);
}
});