I am actually displaying an object (a camera feed). The goal is to zoom and then move my feed as I would do with a GMAP item. I tried GMAP ImageTiler but it didn't really worked as expected. I then tried to do it myself, but I'm also interested by another way (a better/cleaner way) to do what I'm actualy doing!
$("#videoContainer").css('height', 480);
$("#videoContainer").css('width', 640);
$('#videoContainer').on('mousewheel', function (event) {
var height = $('#stream').height();
var width = $('#stream').width();
if (height == 480 && width == 640 && event.deltaY > 0) {
} else {
if (event.deltaY > 0) {
height /= 2;
width /= 2;
$("#stream").css('height', height);
$("#stream").css('width', width);
console.log(height, width);
}
else if (event.deltaY < 0) {
height *= 2;
width *= 2;
$("#stream").css('height', height);
$("#stream").css('width', width);
console.log(height, width);
}
}
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="Mousewheel/jquery.mousewheel.min.js"></script>
</head>
<body>
<div id="videoContainer" style="overflow:hidden;">
<img id="stream" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png">
</div>
</body>
</html>
Thanks to this code, I am able to display the feed and zoom it in a pretty tribal way. Once zoomed (thanks to JQuery Mousewheel, GitHub link at the end of the post), I can only see the top left fourth of the feed by hiding what is overflowed. The last step is, thanks to a system drag and drop-like, moving the feed with the mouse (or a pinch if using a phone).
The fact is that I'm unable to do it. Any idea how to do this anyone ? Thanks :)
Mousewheel : https://github.com/jquery/jquery-mousewheel