Blueimp Gallery: Always show "blueimp-gallery-controls" or how to unbind click handler to show and hide "blueimp-gallery-controls"

Question

Using Blueimg Gallery I would like to know how I can always show the gallery controls (.blueimp-gallery-controls) instead of showing and hiding them when clicking on img class=".slide-content" in the gallery.

Looking at the blueimp-gallery.min.js (that I beautified with Online JavaScript beautifier I have found several click handlers, also indicating the toggle function for the gallery controls.

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

It seems to me that simply commenting these 4 lines gives me the wanted behaviour. However I do not really like to change the original script.

Doing so also throws a Uncaught TypeError: undefined is not a function error at the very end (this.toggleControls()) inside this part of the script.

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())

Deleting , this.toggleControls() from the end of that line in the script gets rid of that error however all this is not really the right approach I think.

Is there a way to override the commands from this script in a user-added script, similar to the !important rule in CSS? Like this, when Blueimp Gallery has an update I can leave the source intact and upload the latest version.

Perhaps the author, Sebastian Tschan, might be able to get in touch if it is not asked too much?

Any help is really much appreciated :)

Answer 1

In order to show the controls you have to add the blueimp-gallery-controls class to your gallery container.

Your container will look like this

<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>

You can then unbind the click handler by overriding the default options. It is important to override the options before initializing your gallery.

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