蓝色印象画廊：始终显示“blueimp-gallery-controls”或如何解除单击处理程序以显示和隐藏“blueimp-gallery-controls”。

Question

使用 Blueimp Gallery，我想知道如何始终显示相册控件 (.blueimp-gallery-controls) 而不是在相册中单击 img class=".slide-content" 时显示和隐藏它们。

查看经过 Online JavaScript beautifier 美化的 blueimp-gallery.min.js，我发现了几个点击处理程序，也找到了相册控件的切换函数。

toggleControls: function() {
    var a = this.options.controlsClass;
    this.container.hasClass(a) ? this.container.removeClass(a) : this.container.addClass(a)
},

似乎仅仅注释掉这4行代码就可以得到想要的行为。然而，我并不想改变原始脚本。

这样做也会在脚本的这一部分中最后（`this.toggleControls()`）抛出一个“未捕获的类型错误：未定义的函数”错误。

f(c.toggleClass) ? (this.preventDefault(b), this.toggleControls()) : f(c.prevClass) ? (this.preventDefault(b), this.prev()) : f(c.nextClass) ? (this.preventDefault(b), this.next()) : f(c.closeClass) ? (this.preventDefault(b), this.close()) : f(c.playPauseClass) ? (this.preventDefault(b), this.toggleSlideshow()) : e === this.slidesContainer[0] ? (this.preventDefault(b), c.closeOnSlideClick ? this.close() : this.toggleControls()) : e.parentNode && e.parentNode === this.slidesContainer[0] && (this.preventDefault(b), this.toggleControls())

从脚本的最后一行中删除this.toggleControls()可以消除该错误，但我认为这并不是正确的方法。

是否有一种方法可以在用户添加的脚本中覆盖此脚本中的命令，类似于CSS中的!important规则？这样，当Blueimp Gallery进行更新时，我就可以保留源代码并上传最新版本。

也许作者Sebastian Tschan如果不介意的话，可能会联系上吗？

非常感谢任何帮助 :)

- lowtechsun

Answer 1

将类名blueimp-gallery-controls添加到blueimp-gallery div中，可以使控件从开始就可见，同时切换功能仍然有效。

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">

希望这有所帮助。

- greetp

Answer 2

为了显示控件，您需要将blueimp-gallery-controls类添加到您的画廊容器中。

您的容器会像这样：

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

您可以通过覆盖默认选项来取消绑定单击处理程序。在初始化画廊之前覆盖选项非常重要。

<script>
    blueimp.Gallery.prototype.options.toggleControlsOnReturn = false;
    blueimp.Gallery.prototype.options.toggleControlsOnSlideClick = false;
</script>

- Manos Pasgiannis

Answer 3

我不确定这是一个好主意还是坏主意。这似乎是最简单和最直接的方法。

.blueimp-gallery > .prev,
.blueimp-gallery > .next,
.blueimp-gallery > .close,
.blueimp-gallery > .title,
.blueimp-gallery > .play-pause {
    display: block; 
}

我将Blueimp CSS添加到我的SASS工作流程中，只是将控制按钮的显示属性更改为block。我没有取消附加切换图库控件类的点击处理程序，因此仍然会触发。

- Aric Harris

Answer 4

要禁用图像上的点击，您可以将toggleControlsOnSlideClick设置为false。

例如：

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

<script>
    document.getElementById('links').onclick = function (event) {
        event = event || window.event;
        var target = event.target || event.srcElement,
                link = target.src ? target.parentNode : target,
                options = {index: link, event: event, toggleControlsOnSlideClick: false},
                links = this.getElementsByTagName('a');
        blueimp.Gallery(links, options);
    };
</script>

- Yoann Kergall