Fixed Glightbox integration

MaxGruson · Jun 26, 2024 · fc8dd94 · fc8dd94
1 parent d549605
commit fc8dd94
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 37 deletions.
diff --git a/build/multimedia-gallery-image/block.json b/build/multimedia-gallery-image/block.json
@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 3,
   "name": "maxgruson/multimedia-gallery-image",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "title": "Afbeelding",
   "category": "media",
   "icon": "format-image",

diff --git a/build/multimedia-gallery-video/block.json b/build/multimedia-gallery-video/block.json
@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 3,
   "name": "maxgruson/multimedia-gallery-video",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "title": "Video",
   "category": "media",
   "icon": "format-video",

diff --git a/build/multimedia-gallery/block.json b/build/multimedia-gallery/block.json
@@ -2,7 +2,7 @@
   "$schema": "https://schemas.wp.org/trunk/block.json",
   "apiVersion": 3,
   "name": "maxgruson/multimedia-gallery",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "title": "Multimediagalerij",
   "category": "design",
   "icon": "format-gallery",

diff --git a/build/multimedia-gallery/view.asset.php b/build/multimedia-gallery/view.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '72db024aaf2c1cc5b41f');
+<?php return array('dependencies' => array(), 'version' => 'c67f42f5199291841a68');
diff --git a/build/multimedia-gallery/view.js b/build/multimedia-gallery/view.js
diff --git a/multimedia-gallery-block.php b/multimedia-gallery-block.php
@@ -4,7 +4,7 @@
  * Description:       A block to add a gallery of images and/or YouTube/Vimeo-videos.
  * Requires at least: 6.1
  * Requires PHP:      7.0
- * Version:           1.0.5
+ * Version:           1.0.7
  * Author:            <a href="https://max.gruson.studio" target="_blank">Max Gruson</a>
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "multimedia-gallery-block",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"description": "Een blok om een gallerij van afbeeldingen en/of YouTube/Vimeo-video’s te maken.",
 	"author": "Max Gruson",
 	"license": "GPL-2.0-or-later",

diff --git a/src/multimedia-gallery-image/block.json b/src/multimedia-gallery-image/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "maxgruson/multimedia-gallery-image",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"title": "Afbeelding",
 	"category": "media",
 	"icon": "format-image",

diff --git a/src/multimedia-gallery-video/block.json b/src/multimedia-gallery-video/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "maxgruson/multimedia-gallery-video",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"title": "Video",
 	"category": "media",
 	"icon": "format-video",

diff --git a/src/multimedia-gallery/block.json b/src/multimedia-gallery/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "maxgruson/multimedia-gallery",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"title": "Multimediagalerij",
 	"category": "design",
 	"icon": "format-gallery",

diff --git a/src/multimedia-gallery/view.js b/src/multimedia-gallery/view.js
@@ -9,43 +9,48 @@ import './view.scss';
 
 document.addEventListener( 'DOMContentLoaded', () => {
 
-  // Init lightbox
-  let i = 1;
-  document.querySelectorAll( '.wp-block-maxgruson-multimedia-gallery' ).forEach( ( gallery ) => {
-    gallery.querySelectorAll( '.multimedia-gallery__link' ).forEach( ( link ) => {
-      link.setAttribute( `data-gallery-${i}`, '' );
-    } );
-    GLightbox( {
-      selector: `data-gallery-${i}`,
-      loop: true,
-    } );
-    i += 1;
+  // Lazy load images
+  const galleryImages =  document.querySelectorAll( '.wp-block-maxgruson-multimedia-gallery img' );
+  galleryImages.forEach( el => {
+    if ( el.complete ) {
+      el.style.opacity = 1;
+    } else {
+      el.addEventListener( 'load', () => {
+        el.style.opacity = 1;
+      } );
+    }
   } );
 
   // Init carousel
   const splides = document.querySelectorAll( '.splide' );
   if(!!splides && splides.length > 0){
-    splides.forEach(splide => {
-      new Splide(splide, {
+    splides.forEach(splideEl => {
+      const splide = new Splide(splideEl, {
         type: 'loop',
         // autoplay: true,
         perPage: 1,
         padding: '4em',
         gap: '1em',
         heightRatio: 0.5625
-      } ).mount();
+      } );
+
+      splide.on( 'ready', () => {
+        // Init lightbox
+        let i = 1;
+        document.querySelectorAll( '.wp-block-maxgruson-multimedia-gallery' ).forEach( ( gallery ) => {
+          gallery.querySelectorAll( '.multimedia-gallery__link' ).forEach( ( link ) => {
+            link.setAttribute( `data-gallery-${i}`, '' );
+          } );
+          GLightbox( {
+            selector: `data-gallery-${i}`,
+            loop: true,
+          } );
+          i += 1;
+        } );
+      } );
+
+      splide.mount();
     })
   }
 
-  // Lazy load images
-  const galleryImages =  document.querySelectorAll( '.wp-block-maxgruson-multimedia-gallery img' );
-  galleryImages.forEach( el => {
-    if ( el.complete ) {
-      el.style.opacity = 1;
-    } else {
-      el.addEventListener( 'load', () => {
-        el.style.opacity = 1;
-      } );
-    }
-  } );
 } );
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array(), 'version' => '72db024aaf2c1cc5b41f');
		<?php return array('dependencies' => array(), 'version' => 'c67f42f5199291841a68');