Add support for [data-fancybox-*] actions

package.json

@@ -22,6 +22,7 @@
   "author": "Janis Skarnelis",
   "keywords": [
     "javascript",
+    "modal",
     "lightbox",
     "fancybox",
     "carousel",
@@ -58,31 +59,30 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
     "chai": "^4.3.4",
-    "core-js": "^3.18.3",
+    "core-js": "^3.19.3",
     "husky": "^7.0.4",
-    "karma": "^6.3.5",
+    "karma": "^6.3.9",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-mocha": "^2.0.1",
     "mocha": "^9.1.3",
     "npm-watch": "^0.11.0",
-    "prettier": "2.4.1",
-    "pretty-quick": "^3.1.1",
-    "puppeteer": "^10.4.0",
-    "rollup": "^2.58.0",
+    "prettier": "2.5.1",
+    "pretty-quick": "^3.1.2",
+    "puppeteer": "^13.0.0",
+    "rollup": "^2.61.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-banner": "^0.2.1",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "1.43.2",
-    "sharp": "^0.29.1"
+    "sass": "1.44.0"
   },
   "browserslist": [
     ">0.2%",

src/Fancybox/Fancybox.js

@@ -1213,9 +1213,28 @@ class Fancybox extends Base {
       return;
     }
 
+    let eventTarget = event.target;
+
+    if (eventTarget.matches("[data-fancybox-close]")) {
+      Fancybox.close(false);
+
+      return;
+    }
+
+    if (eventTarget.matches("[data-fancybox-next]")) {
+      Fancybox.next();
+
+      return;
+    }
+
+    if (eventTarget.matches("[data-fancybox-prev]")) {
+      Fancybox.prev();
+
+      return;
+    }
+
     // Support `trigger` element, e.g., start fancybox from different DOM element, for example,
     // to have one preview image for hidden image gallery
-    let eventTarget = event.target;
     let triggerGroupName;
 
     if (
@@ -1479,6 +1498,28 @@ class Fancybox extends Base {
       if (!all) return;
     }
   }
+
+  /**
+   * Slide topmost currently active instance to next page
+   */
+  static next() {
+    const instance = Fancybox.getInstance();
+
+    if (instance) {
+      instance.next();
+    }
+  }
+
+  /**
+   * Slide topmost currently active instance to previous page
+   */
+  static prev() {
+    const instance = Fancybox.getInstance();
+
+    if (instance) {
+      instance.prev();
+    }
+  }
 }
 
 // Expose version