Blueimp Gallery：始终显示“blueimp-gallery-controls”或如何取消绑定点击处理程序以显示和隐藏“blueimp-gallery-controls”

Posted 2023-04-17

【中文标题】Blueimp Gallery：始终显示“blueimp-gallery-controls”或如何取消绑定点击处理程序以显示和隐藏“blueimp-gallery-controls”

【英文标题】：Blueimp Gallery: Always show "blueimp-gallery-controls" or how to unbind click handler to show and hide "blueimp-gallery-controls"

【发布时间】：2015-05-04 12:36:27

【问题描述】：

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

查看 blueimp-gallery.min.js（我用Online javascript beautifier 美化了它，我发现了几个点击处理程序，也表明了画廊控件的切换功能。

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

在我看来，简单地评论这 4 行给了我想要的行为。但是我不太喜欢更改原始脚本。

这样做还会在这部分脚本的最后 (this.toggleControls()) 引发 Uncaught TypeError: undefined is not a function 错误。

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，如果不问太多，或许能取得联系？

非常感谢任何帮助:)

【参考方案1】：

将 blueimp-gallery-controls 类添加到 blueimp-gallery div 使控件从一开始就可见 + 切换功能仍然有效

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

希望对您有所帮助。

【参考方案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>

【参考方案3】：

我不确定是好主意还是坏主意。这似乎是最简单、最直接的路径。

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

我将 Blueimp CSS 添加到我的 SASS 工作流程中，并将控制按钮的显示属性更改为 block。我没有取消连接切换画廊控件类的点击处理程序，所以它仍然会触发。

【参考方案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>