Add configurable minZoomLevel

artworks.ts

@@ -95,10 +95,11 @@ function displayDzi(index: number): void {
       prefixUrl: "images/", // Adjust the path to OpenSeadragon images
       tileSources: artwork.dziPath,
       defaultZoomLevel: 1.0,
-      minZoomLevel: 0.7,
+      minZoomLevel: artwork.minZoomLevel,
       zoomPerScroll: 1.05,
       zoomPerClick: 1.20,
       showNavigationControl: false,
+      visibilityRatio: 1.0,
       constrainDuringPan: true,
       subPixelRoundingForTransparency: OpenSeadragon.SUBPIXEL_ROUNDING_OCCURRENCES.ALWAYS
     });

constants.ts

@@ -3,6 +3,7 @@ export interface Artwork {
   imagePath: string;
   description: string;
   dziPath: string;
+  minZoomLevel: number;
   maxWidthPercentage: string;
   maxWidthPercentageMobile: string;
 }
@@ -14,6 +15,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/8.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/8.dzi",
     description: `190cm x 190cm\naluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "45%",
     maxWidthPercentageMobile: "75%"
   },
@@ -23,6 +25,7 @@ export const artworks: Artwork[] = [
       // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/5.png",
       dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/5.dzi",
       description: `95.3cm x 190cm aluminium dibond, direct print`,
+      minZoomLevel: 1.5,
       maxWidthPercentage: "25%",
       maxWidthPercentageMobile: "50%"
   },
@@ -32,6 +35,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/4.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/4.dzi",
     description: `300cm x 90cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "70%",
     maxWidthPercentageMobile: "80%"
   },
@@ -41,6 +45,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/2.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/2.dzi",
     description: `160cm x 90cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "60%",
     maxWidthPercentageMobile: "80%"
   },
@@ -50,6 +55,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/3.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/3.dzi",
     description: `135cm x 90cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "60%",
     maxWidthPercentageMobile: "80%"
   },
@@ -59,6 +65,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/6.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/6.dzi",
     description: `126.7cm x 190cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "30%",
     maxWidthPercentageMobile: "65%"
   },
@@ -68,6 +75,7 @@ export const artworks: Artwork[] = [
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/1.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/1.dzi",
     description: `150cm x 100cm aluminium dibond, direct print`,
+    minZoomLevel: 1.5,
     maxWidthPercentage: "60%",
     maxWidthPercentageMobile: "75%"
   },

style.css

@@ -50,11 +50,10 @@ body {
 
 .artwork-container {
   font-family: 'M PLUS Code Latin', monospace;
-  position: fixed; /* Or 'absolute' */
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  position: relative;
+  width: 80vw;  /* 80% of the viewport width */
+  height: 60vh; /* 60% of the viewport height */
+  margin: auto;
 }
 
 #closeViewer {