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"
使用 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,如果不是问的太多,也许能联系上?
非常感谢任何帮助:)
将 class blueimp-gallery-controls
添加到 blueimp-gallery
div 使控件从一开始就可见 + 切换功能仍然有效
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
希望对您有所帮助。
我不确定这是好主意还是坏主意。这似乎是最简单和最直接的路径。
.blueimp-gallery > .prev,
.blueimp-gallery > .next,
.blueimp-gallery > .close,
.blueimp-gallery > .title,
.blueimp-gallery > .play-pause {
display: block;
}
我将 Blueimp CSS 添加到我的 SASS 工作流程中,并将控制按钮的显示属性更改为 block
。我没有取消附加用于切换图库控件的点击处理程序 class,因此仍然会触发。
要禁止点击图片,您可以将 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>
为了显示控件,您必须将 blueimp-gallery-controls class 添加到您的图库容器中。
您的容器将如下所示
<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>
使用 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,如果不是问的太多,也许能联系上?
非常感谢任何帮助:)
将 class blueimp-gallery-controls
添加到 blueimp-gallery
div 使控件从一开始就可见 + 切换功能仍然有效
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
希望对您有所帮助。
我不确定这是好主意还是坏主意。这似乎是最简单和最直接的路径。
.blueimp-gallery > .prev,
.blueimp-gallery > .next,
.blueimp-gallery > .close,
.blueimp-gallery > .title,
.blueimp-gallery > .play-pause {
display: block;
}
我将 Blueimp CSS 添加到我的 SASS 工作流程中,并将控制按钮的显示属性更改为 block
。我没有取消附加用于切换图库控件的点击处理程序 class,因此仍然会触发。
要禁止点击图片,您可以将 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>
为了显示控件,您必须将 blueimp-gallery-controls class 添加到您的图库容器中。
您的容器将如下所示
<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>