单击时在 Galleria 中交换图像

Question

我有一个图片库来展示我正在开发的游戏的屏幕截图，我想对这些图片做一些前后对比。我希望所有的后图像正常显示为画廊的默认设置。对于前图像，虽然我希望它们在单击时显示在相应的后图像之上，而不是所有图像都只是单击的图像。我希望这是一个切换，这样他们就可以点击在新旧版本之间来回切换以进行比较。

Answer 1

嗯，想通了。我在 Galleria.run 函数中使用了它。

                    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";
                        }));
                    });
                }

您当然可以将其改编成不同的东西，但我就是这样做的。

单击时在 Galleria 中交换图像

Swap Images in Galleria on click

galleria