button - Galleria 中关闭全屏模式的按钮

Question

如果您在 Galleria 实例中使用过全屏模式，您就会发现关闭它的唯一方法是按退出键。

由于我喜欢这个功能，因为它非常实用，但对于最终用户来说，它不是那么直观，所以我想在右上角添加一个关闭按钮。

我检查了代码以找出在哪里添加该按钮，但我无法理解它以使其工作。

有人已经做到了吗？我希望我不是唯一有这个想法的人。

感谢您的帮助!

Answer 1

您使用 Galleria API 添加它:

Galleria.ready(function() {
    var gallery = this;
    this.addElement('exit').appendChild('container','exit');
    var btn = this.$('exit').hide().text('close').click(function(e) {
        gallery.exitFullscreen();
    });
    this.bind('fullscreen_enter', function() {
        btn.show();
    });
    this.bind('fullscreen_exit', function() {
        btn.hide();
    });
});

这会将关闭文本放置在左上角，您当然应该使用一些 CSS 对其进行样式设置，例如:

.galleria-exit{position:absolute;top:12px;right:12px;z-index:10;cursor:pointer}