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.
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.