Lightbox (#1144)

package-lock.json

@@ -32,6 +32,7 @@
         "critical": "^4.0.1",
         "cross-spawn": "^7.0.3",
         "flatpickr": "^4.6.13",
+        "fslightbox": "^3.3.1",
         "gulp": "^4.0.2",
         "gulp-clean": "^0.4.0",
         "gulp-clean-css": "^4.3.0",
@@ -74,6 +75,7 @@
         "choices.js": "^10.1.0",
         "countup.js": "^2.1.0",
         "flatpickr": "^4.6.13",
+        "fslightbox": "^3.3.1",
         "imask": "^6.4.2",
         "jsvectormap": "^1.4.5",
         "list.js": "^2.3.1",
@@ -99,6 +101,9 @@
         "flatpickr": {
           "optional": true
         },
+        "fslightbox": {
+          "optional": true
+        },
         "imask": {
           "optional": true
         },
@@ -6426,6 +6431,12 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fslightbox": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fslightbox/-/fslightbox-3.3.1.tgz",
+      "integrity": "sha512-r8mS2lnqw+4F7fQmIXZ4Y+tulxqGsZyG7wzMhWKl8MHvVZRJnclUyt+n+hfTkUa+e1bvlzpw4tY/X9mwqC4wCg==",
+      "dev": true
+    },
     "node_modules/ftp": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/ftp/-/ftp-0.3.10.tgz",
@@ -21107,6 +21118,12 @@
       "dev": true,
       "optional": true
     },
+    "fslightbox": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fslightbox/-/fslightbox-3.3.1.tgz",
+      "integrity": "sha512-r8mS2lnqw+4F7fQmIXZ4Y+tulxqGsZyG7wzMhWKl8MHvVZRJnclUyt+n+hfTkUa+e1bvlzpw4tY/X9mwqC4wCg==",
+      "dev": true
+    },
     "ftp": {
       "version": "0.3.10",
       "resolved": "https://registry.npmjs.org/ftp/-/ftp-0.3.10.tgz",

package.json

@@ -74,6 +74,7 @@
     "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
     "flatpickr": "^4.6.13",
+    "fslightbox": "^3.3.1",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-clean-css": "^4.3.0",
@@ -114,6 +115,7 @@
     "choices.js": "^10.1.0",
     "countup.js": "^2.1.0",
     "flatpickr": "^4.6.13",
+    "fslightbox": "^3.3.1",
     "imask": "^6.4.2",
     "jsvectormap": "^1.4.5",
     "list.js": "^2.3.1",
@@ -139,6 +141,9 @@
     "flatpickr": {
       "optional": true
     },
+    "fslightbox": {
+      "optional": true
+    },
     "imask": {
       "optional": true
     },

src/pages/_data/libs.json

@@ -19,6 +19,7 @@
     "jsvectormap": "jsvectormap/dist/js/jsvectormap.min.js",
     "jsvectormap-world": "jsvectormap/dist/maps/world.js",
     "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js",
+    "fslightbox": "fslightbox/index.js",
     "tinymce" :"tinymce/tinymce.min.js",
     "plyr": "plyr/dist/plyr.min.js"
   },

src/pages/_data/menu.yml

@@ -96,6 +96,10 @@ base:
     markdown:
       title: Markdown
       url: markdown.html
+    lightbox:
+      title: Lightbox
+      url: lightbox.html
+      badge: New
     tinymce:
       title: TinyMCE
       url: tinymce.html

src/pages/lightbox.html

+---
+title: Lightbox
+page-header: Lightbox
+libs: fslightbox
+menu: base.lightbox
+---
+
+{% assign photos = site.data.photos | where: "horizontal", true %}
+
+<div class="row row-cols-6 g-3">
+	{% for photo in photos %}
+	<div class="col">
+		<a data-fslightbox="gallery" href="/static/photos/{{ photo.file }}">
+			<img src="/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="rounded">
+		</a>
+	</div>
+	{% endfor %}
+</div>

src/scss/tabler-vendors.scss

@@ -5,5 +5,6 @@
 @import "vendor/tom-select";
 @import "vendor/apexcharts";
 @import "vendor/jsvectormap";
+@import "vendor/fslightbox";
 @import "vendor/plyr";
 @import "vendor/tinymce";

src/scss/vendor/_fslightbox.scss

+.fslightbox-container {
+  font-family: inherit !important;
+  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
+  backdrop-filter: blur($modal-backdrop-blur) !important;
+}
+
+.fslightbox-slide-number-container {
+  color: inherit !important;
+}
+
+.fslightbox-slash {
+  background: currentColor !important;
+}
\ No newline at end of file