Bug fix on OA

OA.html

@@ -154,6 +154,13 @@
 													<div class="col subject" id="subject"></div>
 												</div>
 
+												<div class="row mb-2" id="SGTI_C" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Soggetti collegati:</span>
+													</div>
+													<div class="col connected_subject" id="connected_subject"></div>
+												</div>
+
 												<div class="row mb-2" id="OGTD" style="display:none;">
 													<div class="col-sm-4">
 														<span class="label">Tipo:</span>
@@ -318,9 +325,10 @@
 											</div>
 											<div class="col" id="image_body">
 
-												<div id="image_artwork">
+												<div class="image" id="image_artwork">
 													<img id="expandedImg" class="viewImage" />
 												</div>
+												<div class="loupe"></div>
 												
 											</div>
 										</div>

css/OA.css

@@ -26,4 +26,22 @@
 #image_min {
     max-height: 900px;
     overflow: auto;
-}
+}
+
+.loupe {
+    display: none;
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+    box-shadow: 5px 5px 12px black;
+    background: rgba(0, 0, 0, 0.25);
+    cursor: crosshair;
+    overflow: hidden;
+  }
+  
+  .loupe img {
+    position: absolute;
+    right: 0;
+  }
+  

js/OA.js

@@ -350,26 +350,71 @@ function handle_SchedeStoriche(json) {
 
   console.log(json['results']['bindings']);
 
-  var schede = "";
+  const schede = [];
+
+  let suffix = ["0", "1", "2", "3", "4", "5"];
 
   $.each(
       json['results']['bindings'],
       function (index, value) {
         var scheda = value['scheda']['value'];
+        scheda.replace(".jpg", "");
+        schede.push(scheda);
+
+        for (i in suffix) {
+          ss = suffix[i];
+          var image_scheda = "img/schedeStoriche/" + scheda + "/" + ss + ".jpg";
+          createImage(image_scheda);
+        }
 
-        img_sc = "img/mpp_img/" + scheda;
+       /* img_sc = "img/mpp_img/" + scheda;
         schede += '<div class="row"> \
                       <img class="viewImage" src="img/mpp_img/' + scheda + '" onclick="expandImg(this);" /> \
                     </div>';
+
+        var dir = "img/schedeStoriche/" + scheda + "/";
+        console.log(files);*/
         
       });
 
-  if (schede == "") {
+  if (schede.length = 0) {
     $("#btn_schedastorica").css("display", "none");
-  } else {
+  }/* else {
     document.getElementById("image_scheda_min").innerHTML = schede;
-  }
+  }*/
+  
+}
+
+function createImage(image) {
+  checkIfImageExists(image, (exists) => {
+    if (exists) {
+      console.log(image);
+      var Image = '<div class="row"> \
+      <img class="viewImage" src="' + image + '" onclick="expandImg(this);"> \
+      </div>';
+      console.log(Image);
+      $('#image_scheda_min').append(Image);
+    } else {
+      console.error('Image does not exists.')
+    }
+  });
+}
+
+function checkIfImageExists(url, callback) {
+  const img = new Image();
+  img.src = url;
   
+  if (img.complete) {
+    callback(true);
+  } else {
+    img.onload = () => {
+      callback(true);
+    };
+    
+    img.onerror = () => {
+      callback(false);
+    };
+  }
 }
 
 function show_OA(){
@@ -404,3 +449,47 @@ function show_INV(){
   document.getElementById("img_title").innerHTML = "Scheda Storica";
   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 });
+
+    $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);
+        }
+    }
+});