LuminousGallery onChange callback

README.md

@@ -153,7 +153,9 @@ LuminousGallery supports two sets of options arguments. The first set is specifi
 ```javascript
 var galleryOpts = {
   // Whether pressing the arrow keys should move to the next/previous slide.
-  arrowNavigation: true
+  arrowNavigation: true,
+  // A callback triggered when the image changes that is passed the image HTML element 
+  onChange: ({ imgEl }) => { … },
 };
 
 var luminousOpts = {

package.json

@@ -18,7 +18,8 @@
   "homepage": "https://github.com/imgix/luminous#readme",
   "contributors": [
     "Frederick Fogerty <[email protected]> (https://github.com/frederickfogerty)",
-    "Jakub Duras <[email protected]> (https://duras.me)"
+    "Jakub Duras <[email protected]> (https://duras.me)",
+    "Gwendolen Lynch <[email protected]> (https://github.com/GwendolenLynch)"
   ],
   "main": "lib/lum.js",
   "module": "es/lum.js",

src/js/Lightbox.js

@@ -304,6 +304,7 @@ export default class Lightbox {
     this._updateImgSrc();
     this._updateCaption();
     this._sizeImgWrapperEl();
+    this.settings._gallery.onChange({ imgEl: this.imgEl });
   }
 
   /**
@@ -321,6 +322,7 @@ export default class Lightbox {
     this._updateImgSrc();
     this._updateCaption();
     this._sizeImgWrapperEl();
+    this.settings._gallery.onChange({ imgEl: this.imgEl });
   }
 
   /**

src/js/LuminousGallery.js

@@ -12,7 +12,8 @@ export default class LuminousGallery {
    */
   constructor(triggers, options = {}, luminousOpts = {}) {
     const optionsDefaults = {
-      arrowNavigation: true
+      arrowNavigation: true,
+      onChange: null,
     };
 
     this.settings = Object.assign({}, optionsDefaults, options);
@@ -68,6 +69,18 @@ export default class LuminousGallery {
       : this.triggers[prevTriggerIndex];
   }
 
+  /**
+   * Callback called when current image is changed
+   * @param {Object} params
+   * @param {!Element} params.imgEl New image element
+   */
+  onChange({ imgEl }) {
+    const onChange = this.settings.onChange;
+    if (onChange && typeof onChange === "function") {
+      onChange({ imgEl });
+    }
+  }
+
   /**
    * Destroys the internal luminous instances
    * @return {void}

test/testLuminousGallery.js

@@ -95,4 +95,38 @@ describe("LuminousGallery", () => {
 
     expect(document.body.querySelector(".lum-img").src).toBe(genLink(0));
   });
+  it("should call onChange when current image moves right", () => {
+    let current = null;
+    new LuminousGallery(document.querySelectorAll(".test-gallery-anchor"), {
+      arrowNavigation: true,
+      onChange: ({ imgEl }) => current = imgEl,
+    });
+
+    openLuminous(0);
+
+    const nextButtonEl = document.body.querySelector(".lum-next-button");
+    if (!nextButtonEl) {
+      throw new Error("Navigation button not found in DOM.");
+    }
+    nextButtonEl.click();
+
+    expect(current.src).toBe(genLink(1));
+  });
+  it("should call onChange when current image moves left", () => {
+    let current = null;
+    new LuminousGallery(document.querySelectorAll(".test-gallery-anchor"), {
+      arrowNavigation: true,
+      onChange: ({ imgEl }) => current = imgEl,
+    });
+
+    openLuminous(1);
+
+    const prevButtonEl = document.body.querySelector(".lum-previous-button");
+    if (!prevButtonEl) {
+      throw new Error("Navigation button not found in DOM.");
+    }
+    prevButtonEl.click();
+
+    expect(current.src).toBe(genLink(0));
+  });
 });