Swap Images in Galleria on click

Question

I have a image gallery to show off screen shots for a game I am working on and I wanted to do some before and afters with the images. I want all the after images displayed normally as the gallery defaults to. For the before images though I want them to show up over their corresponding after image when they are clicked, and not all of them just the one the click. I would like this to be a toggle so they can click to flip back and forth between the new and old versions for comparisons.

Answer 1

Nm, figured it out. I used this inside the Galleria.run function.

                    extend: function(options) {

                    Galleria.log(this) // the gallery instance
                    Galleria.log(options) // the gallery options

                    // listen to when an image is shown
                    this.bind('image', function(e) {

                        Galleria.log(e) // the event object may contain custom objects, in this case the main image
                        Galleria.log(e.imageTarget) // the current image

                        // lets make galleria open a lightbox when clicking the main image:
                        $(e.imageTarget).click(this.proxy(function() {
                            //this.openLightbox();
                            if (e.imageTarget.src.includes("Old")) {
                                e.imageTarget.src = e.imageTarget.src.replace("-Old.png", ".png");
                            } else {
                                e.imageTarget.src = e.imageTarget.src.replace(".png", "-Old.png");

                            }
                            //e.imageTarget.src = "../images/Games/TheVoid/MenuScreen-Old.png";
                        }));
                    });
                }

You can of course adapt this to something different, but this is how I did it.