|
|
@@ -358,13 +358,13 @@ function handle_SchedeStoriche(json) {
|
|
|
json['results']['bindings'],
|
|
|
function (index, value) {
|
|
|
var scheda = value['scheda']['value'];
|
|
|
- scheda.replace(".jpg", "");
|
|
|
+ var sc = scheda.replace(".jpg", "");
|
|
|
schede.push(scheda);
|
|
|
|
|
|
for (i in suffix) {
|
|
|
ss = suffix[i];
|
|
|
- var image_scheda = "img/schedeStoriche/" + scheda + "/" + ss + ".jpg";
|
|
|
- createImage(image_scheda);
|
|
|
+ var image_scheda = "img/schedeStoriche/" + sc + "/" + ss + ".jpg";
|
|
|
+ createScheda(image_scheda);
|
|
|
}
|
|
|
|
|
|
/* img_sc = "img/mpp_img/" + scheda;
|
|
|
@@ -377,7 +377,9 @@ function handle_SchedeStoriche(json) {
|
|
|
|
|
|
});
|
|
|
|
|
|
- if (schede.length = 0) {
|
|
|
+ console.log(schede);
|
|
|
+
|
|
|
+ if (schede.length == 0) {
|
|
|
$("#btn_schedastorica").css("display", "none");
|
|
|
}/* else {
|
|
|
document.getElementById("image_scheda_min").innerHTML = schede;
|
|
|
@@ -385,22 +387,22 @@ function handle_SchedeStoriche(json) {
|
|
|
|
|
|
}
|
|
|
|
|
|
-function createImage(image) {
|
|
|
- checkIfImageExists(image, (exists) => {
|
|
|
+function createScheda(image) {
|
|
|
+ checkIfSchedaExists(image, (exists) => {
|
|
|
if (exists) {
|
|
|
console.log(image);
|
|
|
- var Image = '<div class="row"> \
|
|
|
+ var ImageScheda = '<div class="row"> \
|
|
|
<img class="viewImage" src="' + image + '" onclick="expandImg(this);"> \
|
|
|
</div>';
|
|
|
- console.log(Image);
|
|
|
- $('#image_scheda_min').append(Image);
|
|
|
+ console.log(ImageScheda);
|
|
|
+ $('#image_scheda_min').append(ImageScheda);
|
|
|
} else {
|
|
|
console.error('Image does not exists.')
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
-function checkIfImageExists(url, callback) {
|
|
|
+function checkIfSchedaExists(url, callback) {
|
|
|
const img = new Image();
|
|
|
img.src = url;
|
|
|
|
|
|
@@ -450,46 +452,61 @@ function show_INV(){
|
|
|
document.getElementById("expandedImg").src = img_sc;
|
|
|
}
|
|
|
|
|
|
-var $loupe = $(".loupe"),
|
|
|
- loupeWidth = $loupe.width(),
|
|
|
- loupeHeight = $loupe.height();
|
|
|
|
|
|
-$(document).on("mouseenter", ".image", function (e) {
|
|
|
- var $currImage = $(this),
|
|
|
- $img = $('<img/>')
|
|
|
- .attr('src', $('img', this).attr("src"))
|
|
|
- .css({ 'width': $currImage.width() * 2, 'height': $currImage.height() * 2 });
|
|
|
+function magnify(imgID, zoom) {
|
|
|
+ var img, glass, w, h, bw;
|
|
|
+ img = document.getElementById(imgID);
|
|
|
+ /*create magnifier glass:*/
|
|
|
+ glass = document.createElement("DIV");
|
|
|
+ glass.setAttribute("class", "img-magnifier-glass");
|
|
|
+ glass.setAttribute("id", "glass");
|
|
|
+ /*insert magnifier glass:*/
|
|
|
+ img.parentElement.insertBefore(glass, img);
|
|
|
+ /*set background properties for the magnifier glass:*/
|
|
|
+ glass.style.backgroundImage = "url('" + img.src + "')";
|
|
|
+ glass.style.backgroundRepeat = "no-repeat";
|
|
|
+ glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
|
|
|
+ bw = 3;
|
|
|
+ w = glass.offsetWidth / 2;
|
|
|
+ h = glass.offsetHeight / 2;
|
|
|
+ /*execute a function when someone moves the magnifier glass over the image:*/
|
|
|
+ glass.addEventListener("mousemove", moveMagnifier);
|
|
|
+ img.addEventListener("mousemove", moveMagnifier);
|
|
|
+ /*and also for touch screens:*/
|
|
|
+ glass.addEventListener("touchmove", moveMagnifier);
|
|
|
+ img.addEventListener("touchmove", moveMagnifier);
|
|
|
+ function moveMagnifier(e) {
|
|
|
+ var pos, x, y;
|
|
|
+ /*prevent any other actions that may occur when moving over the image*/
|
|
|
+ e.preventDefault();
|
|
|
+ /*get the cursor's x and y positions:*/
|
|
|
+ pos = getCursorPos(e);
|
|
|
+ x = pos.x;
|
|
|
+ y = pos.y;
|
|
|
+ /*prevent the magnifier glass from being positioned outside the image:*/
|
|
|
+ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
|
|
|
+ if (x < w / zoom) {x = w / zoom;}
|
|
|
+ if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
|
|
|
+ if (y < h / zoom) {y = h / zoom;}
|
|
|
+ /*set the position of the magnifier glass:*/
|
|
|
+ glass.style.left = (x - w) + "px";
|
|
|
+ glass.style.top = (y - h) + "px";
|
|
|
+ /*display what the magnifier glass "sees":*/
|
|
|
+ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
|
|
|
+ }
|
|
|
+ function getCursorPos(e) {
|
|
|
+ var a, x = 0, y = 0;
|
|
|
+ e = e || window.event;
|
|
|
+ /*get the x and y positions of the image:*/
|
|
|
+ a = img.getBoundingClientRect();
|
|
|
+ /*calculate the cursor's x and y coordinates, relative to the image:*/
|
|
|
+ x = e.pageX - a.left;
|
|
|
+ y = e.pageY - a.top;
|
|
|
+ /*consider any page scrolling:*/
|
|
|
+ x = x - window.pageXOffset;
|
|
|
+ y = y - window.pageYOffset;
|
|
|
+ return {x : x, y : y};
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- $loupe.html($img).fadeIn(100);
|
|
|
-
|
|
|
- $(document).on("mousemove",moveHandler);
|
|
|
-
|
|
|
- function moveHandler(e) {
|
|
|
- var imageOffset = $currImage.offset(),
|
|
|
- fx = imageOffset.left - loupeWidth / 2,
|
|
|
- fy = imageOffset.top - loupeHeight / 2,
|
|
|
- fh = imageOffset.top + $currImage.height() + loupeHeight / 2,
|
|
|
- fw = imageOffset.left + $currImage.width() + loupeWidth / 2;
|
|
|
-
|
|
|
- $loupe.css({
|
|
|
- 'left': e.pageX - 75,
|
|
|
- 'top': e.pageY - 75
|
|
|
- });
|
|
|
-
|
|
|
- var loupeOffset = $loupe.offset(),
|
|
|
- lx = loupeOffset.left,
|
|
|
- ly = loupeOffset.top,
|
|
|
- lw = lx + loupeWidth,
|
|
|
- lh = ly + loupeHeight,
|
|
|
- bigy = (ly - loupeHeight / 4 - fy) * 2,
|
|
|
- bigx = (lx - loupeWidth / 4 - fx) * 2;
|
|
|
-
|
|
|
- $img.css({ 'left': -bigx, 'top': -bigy });
|
|
|
-
|
|
|
- if (lx < fx || lh > fh || ly < fy || lw > fw) {
|
|
|
- $img.remove();
|
|
|
- $(document).off("mousemove",moveHandler);
|
|
|
- $loupe.fadeOut(100);
|
|
|
- }
|
|
|
- }
|
|
|
-});
|
|
|
+magnify("expandedImg", 3);
|
Alessia