61 lines
1.3 KiB
JavaScript
61 lines
1.3 KiB
JavaScript
|
// Image zoom-in script
|
||
|
|
|
||
|
|
var zoomed = false;
|
||
|
|
// When a user clicks the image
|
||
|
|
$("#displayImg").on("dblclick doubletap", function (event) {
|
||
|
|
if (zoomed) {
|
||
|
|
$("#displayImg").css("max-width", "100%");
|
||
|
|
$("#displayImg").css("max-height", "100%");
|
||
|
|
$("#displayImg").css("top", "50%");
|
||
|
|
$("#displayImg").css("left", "auto");
|
||
|
|
$("#displayImg").css("transform", "translateY(-50%)");
|
||
|
|
$(".image-container").css("overflow", "hidden");
|
||
|
|
zoomed = false;
|
||
|
|
} else {
|
||
|
|
$("#displayImg").css("max-width", "none");
|
||
|
|
$("#displayImg").css("max-height", "none");
|
||
|
|
$("#displayImg").css("transform", "none");
|
||
|
|
$(".pannable").css("top", "0");
|
||
|
|
$(".image-container").css("overflow", "scroll");
|
||
|
|
zoomed = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Image dragging around the screen
|
||
|
|
|
||
|
|
var drag = {
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
state: false
|
||
|
|
};
|
||
|
|
|
||
|
|
$(".pannable").on("mousedown", function (e) {
|
||
|
|
if (!drag.state && e.which === 1 && zoomed) {
|
||
|
|
drag.x = e.pageX;
|
||
|
|
drag.y = e.pageY;
|
||
|
|
drag.state = true;
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var img = $(".image-container");
|
||
|
|
|
||
|
|
$(document).on("mousemove", function (e) {
|
||
|
|
if (drag.state) {
|
||
|
|
img.scrollLeft(img.scrollLeft() - (e.pageX - drag.x));
|
||
|
|
img.scrollTop(img.scrollTop() - (e.pageY - drag.y));
|
||
|
|
|
||
|
|
drag.x = e.pageX;
|
||
|
|
drag.y = e.pageY;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on("mouseup", function () {
|
||
|
|
if (drag.state) {
|
||
|
|
drag.state = false;
|
||
|
|
}
|
||
|
|
});
|