use basiclightbox for image preview

js/dialog.js

@@ -1,37 +0,0 @@
-function createDialogImage(url) {
-    createDialogHTML(`<img src="${url}">`, "imageDialog");
-}
-
-function createDialogHTML(html, customClasses = "") {
-    let dialog = document.createElement("div");
-    dialog.classList.add("dialog");
-
-    dialog.innerHTML = `
-    <span class="close">&times;</span>
-    <div class="dialogContent ${customClasses}">
-        ${html}
-    </div>`;
-
-    document.body.appendChild(dialog);
-    fade(dialog, 0.04);
-
-    dialog.querySelector(".close").onclick = function (){
-        fade(dialog, -0.04, true);
-    }
-}
-
-function fade(element, value = 0.1, deleteAfterwards = false) {
-    let opacity = +(element.style.opacity) + value;
-
-    element.style.opacity = String(opacity);
-
-    if ((opacity < 1 && value > 0) || (opacity >= 0 && value < 0)) {
-        setTimeout(function () {
-            fade(element, value, deleteAfterwards);
-        }, 10);
-    } else if (deleteAfterwards) {
-        setTimeout(function () {
-            element.parentNode.removeChild(element);
-        }, 10);
-    }
-}

js/imgPreview.js

@@ -1,7 +1,15 @@
+import * as basicLightbox from 'basiclightbox'
+
 let images = document.getElementsByTagName("img");
 for(let i = 0; i < images.length; i++){
     let element = images[i];
     if(!(element.getAttribute("data-noPreview") === "true")) {
-        element.onclick = () => createDialogImage(element.src);
+        element.onclick = () => {
+            console.log("render");
+            const instance = basicLightbox.create(`
+            <img src="${element.src}">
+            `);
+            instance.show(() => console.log('lightbox now visible'))
+        }
     }
 }

js/script.js

@@ -1,6 +1,5 @@
 require("./cookie");
 require("./burgerMenu");
-require("./dialog");
 require("./error");
 require("./imgPreview");
 require("./includeHTML");

package.json

@@ -17,6 +17,7 @@
     "webpack-cli": "^4.5.0"
   },
   "dependencies": {
+    "basiclightbox": "^5.0.4",
     "plotly.js-dist": "^1.58.4",
     "sass": "^1.32.8",
     "webpack": "^5.28.0"

scss/style.scss

@@ -15,3 +15,4 @@
 @import "menuMobile";
 @import "mobileSmall";
 @import "dialog";
+@import "../node_modules/basiclightbox/src/styles/main";

yarn.lock

@@ -796,6 +796,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+basiclightbox@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/basiclightbox/-/basiclightbox-5.0.4.tgz#5367d6d468ae44406e51b8486cfb8751f36f1fb2"
+  integrity sha512-EsuNWmfcFXWZOe0txKXsllYOC7bDpoaVLc4HHHlYKB/roymlZs+FBdLUU6rx2yPpnJZhulwheKdPjqr2k0+NGQ==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"