Add new viewer for images

OA.html

@@ -29,6 +29,9 @@
 	<link rel="stylesheet" href="js/dist/MarkerCluster.Default.css" />
 	<script src="js/dist/leaflet.markercluster-src.js"></script>
 
+	<script src="https://cdn.jsdelivr.net/npm/openseadragon/build/openseadragon/openseadragon.min.js"></script>
+    <script src="js/openseadragon-html-overlay.js"></script>
+
 	<link href="css/styles.min.css" rel="stylesheet">
 </head>
 
@@ -134,7 +137,7 @@
 											<button id="btn_papini1912" type="button" class="nav-link" data-toggle="tab" onClick="show_P1912()">Guida 1912</button>
 										</li>
 										<li class="nav-item infoChoice">
-											<button id="btn_marchini1956" type="button" class="nav-link" data-toggle="tab" onClick="show_M1956()">Guida 1956</button>
+											<button id="btn_marchini1956" type="button" class="nav-link" data-toggle="tab" onClick="show_M1956()">Inventario 1956</button>
 										</li>
 										<li class="nav-item infoChoice">
 											<button id="btn_catalogo" type="button" class="nav-link" data-toggle="tab" onClick="show_CAT()">Guida 1958</button>
@@ -455,11 +458,14 @@
 											<h2 id="OA_images_titolo">Immagine <span id="img_title">Opera</span></h2>
 										</div>
 
+										<!--To activate Magnifier insert class="zoomImg" in button-->
+										<!--
 										<div class="d-flex justify-content-end">
-											<button title="Lente d\'ingrandimento" type="button" value="zoom" class="zoomImg btn btn-default" alt="scheda"><i class="fa fa-search-plus" style="font-size:x-large;"></i></button>
+											<button title="Lente d\'ingrandimento" type="button" value="zoom" btn btn-default" alt="scheda"><i class="fa fa-search-plus" style="font-size:x-large;"></i></button>
 										</div>
+									-->
 
-										<div id="images_container" class="row border-grey center">
+									<!--	<div id="images_container" class="row border-grey center">
 											<div class="col-2" id="image_min">
 												<div class="row">
 													<div id="image_artwork_min" class="col"></div>
@@ -485,7 +491,10 @@
 												</div>
 												
 											</div>
-										</div>
+										</div> -->
+
+										<div id="toolbarDiv" class="toolbar"></div>
+        								<div id="contentDiv" class="openseadragon1"></div>
 
 									</div>
 								</div>

css/OA.css

@@ -53,4 +53,44 @@
   
   .minImage {
       padding: 10px;
-  }
+  }
+
+  .openseadragon1
+  {
+      width:      100%;
+      height:     600px;
+      border:     1px solid black;
+      color:      #333; /* text color for messages */
+      background-color: black;
+  }
+
+            .text-overlay,
+            .text-overlay2 {
+                position: absolute;
+                left: 200px;
+                top: 65px;
+                width: 420px;
+                font-size: 25px;
+                font-family: sans-serif;
+                color: white;
+                text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
+            }
+
+            .text-overlay a,
+            .text-overlay2 a {
+                color: #DDF;
+            }
+
+            .image-overlay,
+            .image-overlay2 {
+                position: absolute;
+                left: 650px;
+                top: 65px;
+                width: 140px;
+                height: 140px;
+                cursor: pointer;
+            }
+
+            .toolbar {
+                height:40px;
+            }

css/pages.css

@@ -369,3 +369,43 @@ a {
   top: -100%;
   left: 0;*/
 }
+
+.openseadragon1
+  {
+      width:      100%;
+      height:     600px;
+      border:     1px solid black;
+      color:      #333; /* text color for messages */
+      background-color: black;
+  }
+
+            .text-overlay,
+            .text-overlay2 {
+                position: absolute;
+                left: 200px;
+                top: 65px;
+                width: 420px;
+                font-size: 25px;
+                font-family: sans-serif;
+                color: white;
+                text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
+            }
+
+            .text-overlay a,
+            .text-overlay2 a {
+                color: #DDF;
+            }
+
+            .image-overlay,
+            .image-overlay2 {
+                position: absolute;
+                left: 650px;
+                top: 65px;
+                width: 140px;
+                height: 140px;
+                cursor: pointer;
+            }
+
+            .toolbar {
+                height:40px;
+            }

js/OA.js

@@ -20,13 +20,13 @@ doJsonQuery(querySc).done(function(data) { handle_SchedeStoriche(data); });
 queryIcon = prefixes + (queryManager['querySchedaOpera']['queryIconclass']).replace('{URI}', link);
 doJsonQuery(queryIcon).done(function(data) { handle_Iconclass(data); });
 
-var img_pic = "";
-var img_cat = "";
-var img_sc = "";
-var img_g1858 = "";
-var img_g1888 = "";
-var img_p1912 = "";
-var img_m1956 = "";
+var img_pic = [];
+var img_cat = [];
+var img_sc = [];
+var img_g1858 = [];
+var img_g1888 = [];
+var img_p1912 = [];
+var img_m1956 = [];
 
 function handle_OAdata(json) {
 
@@ -167,6 +167,7 @@ function handle_Picture(json) {
 
   var picture = "";
   const tavole = [];
+  var tiles2 = [];
 
   $.each(
       json['results']['bindings'],
@@ -182,14 +183,21 @@ function handle_Picture(json) {
         tavole.push(tv);
 
         src_picture = value['picture']['value'];
-        picture += '<div class="row"> \
-                           <img class="minImage viewImage" src="img/mpp_img/' + src_picture + '" onclick="expandImg(this);" /> \
-                    </div>';
+        //picture += '<div class="row"> \
+        //                   <img class="minImage viewImage" src="img/mpp_img/' + src_picture + '" onclick="expandImg(this);" /> \
+        //            </div>';
+
+        img_pic.push({
+          type: "image",
+          url: "http://restore.ovi.cnr.it/beta/img/mpp_img/" + src_picture 
+        });
 
         
       });
 
-      var front_pic = "";
+      runOpenseadragon(img_pic);
+
+      /*var front_pic = "";
 
       if (tavole.length > 1) {
         for (i in tavole) {
@@ -201,10 +209,10 @@ function handle_Picture(json) {
         front_pic = tavole[0][0];
       }
 
-      img_pic = "img/mpp_img/" + front_pic;
+      img_pic = "img/mpp_img/" + front_pic;*/
 
-      document.getElementById("image_artwork_min").innerHTML = picture;
-      document.getElementById("expandedImg").src = "img/mpp_img/" + front_pic;
+      //document.getElementById("image_artwork_min").innerHTML = picture;
+      //document.getElementById("expandedImg").src = "img/mpp_img/" + front_pic;
 
 }
 
@@ -313,6 +321,10 @@ function handle_Bibliography(json) {
   var g1858Img = "";
   var g1888Img = "";
   var p1912Img = "";
+  var n_cat = 0;
+  var n_g1858 = 0;
+  var n_g1888 = 0;
+  var n_p1912 = 0;
 
   $.each(
       json['results']['bindings'],
@@ -335,11 +347,15 @@ function handle_Bibliography(json) {
             cc = value['catalog']['value'];
             cat = cc.split(", ");
             for (i in cat) {
+                n_cat+=1;
                 var marchini = cat[i].replace(".jpg", " (1).jpg");
-                img_cat = "img/MPP_marchini_stampa/" + marchini;
-                catImg += '<div class="row"> \
-                              <img class="minImage viewImage" src="img/MPP_marchini_stampa/' + marchini + '" onclick="expandImg(this);" /> \
-                          </div>';
+                var img_catalogo = "img/MPP_marchini_stampa/" + marchini;
+
+                img_cat.push({
+                  type: "image",
+                  url: "http://restore.ovi.cnr.it/beta/" + img_catalogo
+                });
+
             }
           }
           
@@ -349,11 +365,15 @@ function handle_Bibliography(json) {
             cc1858 = value['catalog']['value'];
             cat1858 = cc1858.split(", ");
             for (i in cat1858) {
+                n_g1858+=1;
                 var guasti1858 = cat1858[i];
-                img_g1858 = "img/MPP_Guasti_1858/" + guasti1858;
-                g1858Img += '<div class="row"> \
-                              <img class="minImage viewImage" src="img/MPP_Guasti_1858/' + guasti1858 + '" onclick="expandImg(this);" /> \
-                          </div>';
+                var img_guasti1858 = "img/MPP_Guasti_1858/" + guasti1858;
+
+                img_g1858.push({
+                  type: "image",
+                  url: "http://restore.ovi.cnr.it/beta/" + img_guasti1858 
+                });
+
             }
           }
 
@@ -362,11 +382,14 @@ function handle_Bibliography(json) {
             cc1888 = value['catalog']['value'];
             cat1888 = cc1888.split(", ");
             for (i in cat1888) {
+                n_g1888+=1;
                 var guasti1888 = cat1888[i];
-                img_g1888 = "img/MPP_Guasti_1888/" + guasti1888;
-                g1888Img += '<div class="row"> \
-                              <img class="minImage viewImage" src="img/MPP_Guasti_1888/' + guasti1888 + '" onclick="expandImg(this);" /> \
-                          </div>';
+                var img_guasti1888 = "img/MPP_Guasti_1888/" + guasti1888;
+
+                img_g1888.push({
+                  type: "image",
+                  url: "http://restore.ovi.cnr.it/beta/" + img_guasti1888 
+                });
             }
           }
 
@@ -375,11 +398,15 @@ function handle_Bibliography(json) {
             cc1912 = value['catalog']['value'];
             cat1912 = cc1912.split(", ");
             for (i in cat1912) {
+                n_p1912+=1;
                 var papini1912 = cat1912[i];
-                img_p1912 = "img/MPP_Papini_1912/" + papini1912;
-                p1912Img += '<div class="row"> \
-                              <img class="minImage viewImage" src="img/MPP_Papini_1912/' + papini1912 + '" onclick="expandImg(this);" /> \
-                          </div>';
+                img_papini1912 = "img/MPP_Papini_1912/" + papini1912;
+
+                img_p1912.push({
+                  type: "image",
+                  url: "http://restore.ovi.cnr.it/beta/" + img_papini1912 
+                });
+
             }
           }
 
@@ -405,26 +432,18 @@ function handle_Bibliography(json) {
       document.getElementById("guasti1888_description").innerHTML = g1888Cit;
       document.getElementById("papini1912_description").innerHTML = p1912Cit;
 
-      if (catImg == "") {
+      if (n_cat == 0) {
         $("#btn_catalogo").css("display", "none");
-      } else {
-        document.getElementById("image_catalog_min").innerHTML = catImg;
-      }
-      if (g1858Img == "") {
+      } 
+      if (n_g1858 == 0) {
         $("#btn_guasti1858").css("display", "none");
-      } else {
-        document.getElementById("image_guasti1858_min").innerHTML = g1858Img;
-      }
-      if (g1888Img == "") {
+      } 
+      if (n_g1888 == 0) {
         $("#btn_guasti1888").css("display", "none");
-      } else {
-        document.getElementById("image_guasti1888_min").innerHTML = g1888Img;
-      }
-      if (p1912Img == "") {
+      } 
+      if (n_p1912 == 0) {
         $("#btn_papini1912").css("display", "none");
-      } else {
-        document.getElementById("image_papini1912_min").innerHTML = p1912Img;
-      }
+      } 
   
 }
 
@@ -458,6 +477,7 @@ function handle_SchedeStoriche(json) {
 
   const schede = [];
   var m1956Img = "";
+  var n_m1956 = 0;
 
   let suffix = ["0", "1", "2", "3", "4", "5"];
 
@@ -474,7 +494,7 @@ function handle_SchedeStoriche(json) {
           var sc = scheda.replace(".jpg", "");
           schede.push(scheda); 
 
-          img_sc = "img/schedeStoriche/" + sc + "/0.jpg";;
+          //img_sc = "img/schedeStoriche/" + sc + "/0.jpg";;
 
           for (i in suffix) {
             ss = suffix[i];
@@ -495,41 +515,40 @@ function handle_SchedeStoriche(json) {
           cc1956 = scheda;
           cat1956 = cc1956.split(", ");
           for (i in cat1956) {
+              n_m1956 = n_m1956 + 1;
               var marchini1956 = cat1956[i];
-              img_m1956 = "img/MPP_Marchini_1956/" + marchini1956;
-              m1956Img += '<div class="row"> \
-                              <img class="minImage viewImage" src="img/MPP_Marchini_1956/' + marchini1956 + '" onclick="expandImg(this);" /> \
-                          </div>';
+              var img_marchini1956 = "img/MPP_Marchini_1956/" + marchini1956;
+
+              img_m1956.push({
+                type: "image",
+                url: "http://restore.ovi.cnr.it/beta/" + img_marchini1956 
+              });
           }
         }
         
       });
 
-  if (schede.length == 0) {
+  if (schede.length = 0) {
     $("#btn_schedastorica").css("display", "none");
-  }/* else {
-    document.getElementById("image_scheda_min").innerHTML = schede;
-  }*/
-
-  
-  if (m1956Img == "") {
-    $("#btn_marchini1956").css("display", "none");
-  } else {
-    document.getElementById("image_marchini1956_min").innerHTML = m1956Img;
   }
 
+  console.log(n_m1956);
+  if (n_m1956 == 0) {
+    $("#btn_marchini1956").css("display", "none");
+  } 
   
 }
 
 function createScheda(image) {
   checkIfSchedaExists(image, (exists) => {
     if (exists) {
-      console.log(image);
       var ImageScheda = '<div class="row"> \
       <img class="minImage viewImage" src="' + image + '" onclick="expandImg(this);"> \
       </div>';
-      console.log(ImageScheda);
-      $('#image_scheda_min').append(ImageScheda);
+      img_sc.push({
+        type: "image",
+        url: "http://restore.ovi.cnr.it/beta/" + image 
+      });
     } else {
       console.error('Image does not exists.')
     }
@@ -561,15 +580,9 @@ function show_OA(){
   document.getElementById("guasti1888_info").style.display = "none";
   document.getElementById("papini1912_info").style.display = "none";
   document.getElementById("marchini1956_info").style.display = "none";
-  document.getElementById("image_artwork_min").style.display = "block";
-  document.getElementById("image_catalog_min").style.display = "none";
-  document.getElementById("image_scheda_min").style.display = "none";
-  document.getElementById("image_guasti1858_min").style.display = "none";
-  document.getElementById("image_guasti1888_min").style.display = "none";
-  document.getElementById("image_papini1912_min").style.display = "none";
-  document.getElementById("image_marchini1956_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Opera";
-  document.getElementById("expandedImg").src = img_pic;
+  clearViewer();
+  runOpenseadragon(img_pic);
 }
 
 function show_CAT(){
@@ -580,15 +593,9 @@ function show_CAT(){
   document.getElementById("guasti1888_info").style.display = "none";
   document.getElementById("papini1912_info").style.display = "none";
   document.getElementById("marchini1956_info").style.display = "none";
-  document.getElementById("image_artwork_min").style.display = "none";
-  document.getElementById("image_catalog_min").style.display = "block";
-  document.getElementById("image_scheda_min").style.display = "none";
-  document.getElementById("image_guasti1858_min").style.display = "none";
-  document.getElementById("image_guasti1888_min").style.display = "none";
-  document.getElementById("image_papini1912_min").style.display = "none";
-  document.getElementById("image_marchini1956_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Guida Marchini 1958";
-  document.getElementById("expandedImg").src = img_cat;
+  clearViewer();
+  runOpenseadragon(img_cat);
 }
 
 function show_INV(){
@@ -599,15 +606,9 @@ function show_INV(){
   document.getElementById("guasti1888_info").style.display = "none";
   document.getElementById("papini1912_info").style.display = "none";
   document.getElementById("marchini1956_info").style.display = "none";
-  document.getElementById("image_artwork_min").style.display = "none";
-  document.getElementById("image_catalog_min").style.display = "none";
-  document.getElementById("image_scheda_min").style.display = "block";
-  document.getElementById("image_guasti1858_min").style.display = "none";
-  document.getElementById("image_guasti1888_min").style.display = "none";
-  document.getElementById("image_papini1912_min").style.display = "none";
-  document.getElementById("image_marchini1956_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Scheda Storica";
-  document.getElementById("expandedImg").src = img_sc;
+  clearViewer();
+  runOpenseadragon(img_sc);
 }
 
 function show_G1858(){
@@ -618,15 +619,9 @@ function show_G1858(){
   document.getElementById("guasti1888_info").style.display = "none";
   document.getElementById("papini1912_info").style.display = "none";
   document.getElementById("marchini1956_info").style.display = "none";
-  document.getElementById("image_artwork_min").style.display = "none";
-  document.getElementById("image_catalog_min").style.display = "none";
-  document.getElementById("image_scheda_min").style.display = "none";
-  document.getElementById("image_guasti1858_min").style.display = "block";
-  document.getElementById("image_guasti1888_min").style.display = "none";
-  document.getElementById("image_papini1912_min").style.display = "none";
-  document.getElementById("image_marchini1956_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Guida Guasti 1858";
-  document.getElementById("expandedImg").src = img_g1858;
+  clearViewer();
+  runOpenseadragon(img_g1858);
 }
 
 function show_G1888(){
@@ -637,15 +632,9 @@ function show_G1888(){
   document.getElementById("guasti1888_info").style.display = "block";
   document.getElementById("papini1912_info").style.display = "none";
   document.getElementById("marchini1956_info").style.display = "none";
-  document.getElementById("image_artwork_min").style.display = "none";
-  document.getElementById("image_catalog_min").style.display = "none";
-  document.getElementById("image_scheda_min").style.display = "none";
-  document.getElementById("image_guasti1858_min").style.display = "none";
-  document.getElementById("image_guasti1888_min").style.display = "block";
-  document.getElementById("image_papini1912_min").style.display = "none";
-  document.getElementById("image_marchini1956_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Guida Guasti 1888";
-  document.getElementById("expandedImg").src = img_g1888;
+  clearViewer();
+  runOpenseadragon(img_g1888);
 }
 
 function show_P1912(){
@@ -656,15 +645,9 @@ function show_P1912(){
   document.getElementById("guasti1888_info").style.display = "none";
   document.getElementById("papini1912_info").style.display = "block";
   document.getElementById("marchini1956_info").style.display = "none";
-  document.getElementById("image_artwork_min").style.display = "none";
-  document.getElementById("image_catalog_min").style.display = "none";
-  document.getElementById("image_scheda_min").style.display = "none";
-  document.getElementById("image_guasti1858_min").style.display = "none";
-  document.getElementById("image_guasti1888_min").style.display = "none";
-  document.getElementById("image_papini1912_min").style.display = "block";
-  document.getElementById("image_marchini1956_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Catalogo Papini 1912";
-  document.getElementById("expandedImg").src = img_p1912;
+  clearViewer();
+  runOpenseadragon(img_p1912);
 }
 
 function show_M1956(){
@@ -675,15 +658,10 @@ function show_M1956(){
   document.getElementById("guasti1888_info").style.display = "none";
   document.getElementById("papini1912_info").style.display = "none";
   document.getElementById("marchini1956_info").style.display = "block";
-  document.getElementById("image_artwork_min").style.display = "none";
-  document.getElementById("image_catalog_min").style.display = "none";
-  document.getElementById("image_scheda_min").style.display = "none";
-  document.getElementById("image_guasti1858_min").style.display = "none";
-  document.getElementById("image_guasti1888_min").style.display = "none";
-  document.getElementById("image_papini1912_min").style.display = "none";
-  document.getElementById("image_marchini1956_min").style.display = "block";
   document.getElementById("img_title").innerHTML = "Marchini 1956";
-  document.getElementById("expandedImg").src = img_m1956;
+  clearViewer();
+  runOpenseadragon(img_m1956);
+  //document.getElementById("expandedImg").src = img_m1956;
 }
 
 
@@ -761,3 +739,11 @@ function magnify(imgID, zoom) {
     return {x : x, y : y};
   }
 }
+
+function clearViewer() {
+  var div = document.getElementById("contentDiv");
+    
+  while(div.firstChild) {
+      div.removeChild(div.firstChild);
+  }
+}

js/advanced_search.js

@@ -45,7 +45,7 @@ const graphArray = [
 	["ASPO - Marcovaldi", "http://dev.restore.ovi.cnr.it:8890/aspo/marcovaldi", "Object"],
 	["ASPO - Onomastica Gettatelli", "http://dev.restore.ovi.cnr.it:8890/aspo/gettatelli", "Person"],
 	["ASPO - Onomastica Datini", "http://dev.restore.ovi.cnr.it:8890/aspo/onomastica", "Person"],
-	["MPP – Galleria Martini", "http://dev.restore.ovi.cnr.it:8890/mpp/autori", "Person"],
+	["MPP – Onomastica Artisti", "http://dev.restore.ovi.cnr.it:8890/mpp/autori", "Person"],
 	["MPP - Collezione Martini", "http://dev.restore.ovi.cnr.it:8890/mpp/martini", "Artwork"],
 	["MPP -  Opere provenienti dall’Ospedale", "http://dev.restore.ovi.cnr.it:8890/mpp/ospedale", "Artwork"],
 	["MPP – Iconografia Datini", "http://dev.restore.ovi.cnr.it:8890/mpp/datini", "Artwork"],

js/object.js

@@ -159,9 +159,12 @@ function get_graph_name(graph) {
   return dataset;
 }
 
+var tiles = [];
+
 function handle_contrassegni(json) {
 
   console.log(json);
+  var tiles2;
 
   var uri = "";
   var graph = "";
@@ -182,22 +185,25 @@ function handle_contrassegni(json) {
       uri_gettatello = value['uri_person']['value'];
       gettatello = value['gettatello']['value'];
       graph = value['g']['value'];
-      
-    });
 
-  if (immagine != "") {
+      if (immagine != "") {
         $("#IMM").css("display", "flex");
-
+        
         let imgs = immagine.split("_");
         const suffix = ["_a", "_b", "_c", "_a_2", "_a1", "_a2"];
 
         for (var k=0; k<suffix.length; k++) {
 
-          var image_url = "img/contrassegni/" + imgs[0] + suffix[k] + ".jpg";
+          var image_url = "http://restore.ovi.cnr.it/beta/img/contrassegni/" + imgs[0] + suffix[k] + ".jpg";
           markImg.push(image_url);
-          createImage(image_url);
+          tiles.push({
+            type: "image",
+            url: image_url 
+          });
       }
     }
+      
+    });
 
   if ((gettatello != "") && (uri_gettatello != "")) {
     $("#GT").css("display", "flex");
@@ -219,7 +225,7 @@ function handle_contrassegni(json) {
 
   var dataset = get_graph_name(graph);
 
-
+  runOpenseadragon(tiles);
   document.getElementById("nome_oggetto").innerHTML = contrassegno;
   document.getElementById("grafo").innerHTML = dataset;
   document.getElementById("link_buttons").innerHTML = Buttons;
@@ -227,15 +233,19 @@ function handle_contrassegni(json) {
 
 }
 
-function createImage(image) {
+function createImage(image, tiles3) {
   checkIfImageExists(image, (exists) => {
     if (exists) {
       console.log(image);
-      var Image = '<div class="singleImg"> \
+      tiles.push({
+        type: "image",
+        url: image 
+      });
+      /*var Image = '<div class="singleImg"> \
       <img src="' + image + '" alt="contrassegno" style="width:100%" onclick="expandImg(this);"> \
       </div>';
       console.log(Image);
-      $('#images').append(Image);
+      $('#images').append(Image);*/
     } else {
       console.error('Image does not exists.')
     }

js/openseadragon-html-overlay.js

@@ -0,0 +1,112 @@
+// OpenSeadragon HTML Overlay plugin 0.0.2
+
+(function() {
+
+    var $ = window.OpenSeadragon;
+
+    if (!$) {
+        $ = require('openseadragon');
+        if (!$) {
+            throw new Error('OpenSeadragon is missing.');
+        }
+    }
+
+    // ----------
+    $.Viewer.prototype.htmlOverlay = function (options) {
+        options = options || {};
+
+        if (this._htmlOverlayInfo) {
+            return this._htmlOverlayInfo;
+        }
+
+        this._htmlOverlayInfo = new Overlay(this);
+        if (options.scale) {
+            this._htmlOverlayInfo._scale = options.scale; // arbitrary scale for created overlay element
+        }
+        else {
+            this._htmlOverlayInfo._scale = 1;
+        }
+        return this._htmlOverlayInfo;
+    };
+
+    // ----------
+    var Overlay = function(viewer) {
+        var self = this;
+
+        this._viewer = viewer;
+
+        this._element = document.createElement('div');
+        this._element.style.position = 'absolute';
+        this._element.style.left = 0;
+        this._element.style.top = 0;
+        this._element.style.width = '100%';
+        this._element.style.height = '100%';
+        this._element.style.transformOrigin = '0 0';
+        this._viewer.canvas.appendChild(this._element);
+
+        // OpenSeadragon blocks the normal click event action, so we have to reestablish it for links here
+        new OpenSeadragon.MouseTracker({
+            element: this._element,
+            clickHandler: function(event) {
+                var clickTarget = event.originalEvent.target;
+                if (/a/i.test(clickTarget.nodeName)) {
+                    if (clickTarget.target === '_blank') {
+                        window.open(clickTarget.href);
+                    } else {
+                        location.href = clickTarget.href;
+                    }
+                }
+            }
+        });
+
+        this._viewer.addHandler('animation', function() {
+            self.resize();
+        });
+
+        this._viewer.addHandler('open', function() {
+            self.resize();
+        });
+
+        this._viewer.addHandler('rotate', function(evt) {
+            self.resize();
+        });
+
+        this._viewer.addHandler('resize', function() {
+            self.resize();
+        });
+
+        this.resize();
+    };
+
+    // ----------
+    Overlay.prototype = {
+        // ----------
+        element: function() {
+            return this._element;
+        },
+
+        // ----------
+        resize: function() {
+            var p = this._viewer.viewport.pixelFromPoint(new $.Point(0, 0), true);
+            var zoom = this._viewer.viewport.getZoom(true);
+            var rotation = this._viewer.viewport.getRotation();
+
+            // TODO: Expose an accessor for _containerInnerSize in the OSD API so we don't have to use the private variable.
+            var scale = this._viewer.viewport._containerInnerSize.x * zoom / this._scale;
+
+            this._element.style.transform =
+                'translate(' + p.x + 'px,' + p.y + 'px) scale(' + scale + ') rotate(' + rotation + ')';
+        },
+
+        // ----------
+        onClick: function(element, handler) {
+            // TODO: Fast click for mobile browsers
+
+            new $.MouseTracker({
+                element: element,
+                clickHandler: handler
+            }).setTracking(true);
+        }
+    };
+
+})();

js/search.js

@@ -72,9 +72,9 @@ $(document).ready(function () {
 			object_Label = "";
 			id_label = "";
 			name_per = "";
-			note_per = "";
+			note_per = " ?note bif:contains 'NNNNNN' . ";;
 			place_search = "";
-			occupation_per = "";
+			occupation_per = " ?occupation bif:contains 'NNNNN' . ";;
 		}
 
 		var g = document.getElementById("graph_selector");
@@ -83,6 +83,10 @@ $(document).ready(function () {
 		var graph1 = g.value;
 		var graph2 = g2.value;
 
+		if (graph1 == 'MPP') {
+			object_Label = " ?object_Label bif:contains 'NNNNNNNN' . ";
+		}
+
 		var search_graph = getGraph(graph1, graph2);
 
 		var pref = queryManager['prefixes']['all'];
@@ -417,7 +421,7 @@ function InfObj_handle_json(json) {
 
 function Person_handle_json(json) {
 
-//	console.log(json); 
+	console.log(json); 
 
     perQueries = perQueries+1;
     if(perQueries==3){

js/utilities.js

@@ -195,4 +195,19 @@ function slide() {
   if (myIndex > x.length) {myIndex = 1}    
   x[myIndex-1].style.display = "block";  
   setTimeout(slide, 12000);    
+}
+
+function runOpenseadragon(tiles) {
+  console.log(tiles);
+  var viewer = OpenSeadragon({
+    id: "contentDiv",
+    prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon/build/openseadragon/images/",
+    maxZoomPixelRatio: 3,
+    toolbar:       "toolbarDiv",
+    springStiffness:        10,
+    sequenceMode:           true,
+    showReferenceStrip:     true,
+    autoHideControls:       false,
+    tileSources: tiles
+  });
 }

object.html

@@ -30,6 +30,9 @@
 	<link rel="stylesheet" href="js/dist/MarkerCluster.Default.css" />
 	<script src="js/dist/leaflet.markercluster-src.js"></script>
 
+	<script src="https://cdn.jsdelivr.net/npm/openseadragon/build/openseadragon/openseadragon.min.js"></script>
+    <script src="js/openseadragon-html-overlay.js"></script>
+
 	<link href="css/styles.min.css" rel="stylesheet">
 </head>
 
@@ -216,14 +219,19 @@
 														</div>
 													</div>
 												</div>
+												<div id="toolbarDiv" class="toolbar"></div>
+        										<div id="contentDiv" class="openseadragon1" style="height:600px;"></div>
+
 											</div>
 										</div>
 
-										<div class="container_img">
+										
+
+										<!--<div class="container_img">
 											<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 											<img id="expandedImg" style="width:100%">
 											<div id="imgtext"></div>
-										</div>
+										</div>-->
 
 									</div>
 								</div>