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

Metamorphose

Answer 1

Adding the class blueimp-gallery-controls to the blueimp-gallery div makes the controls visible from the start + toggle functionality still works

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

Hope that helps.

Deficient

Answer 2

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>

Babbette

Answer 3

I am not sure if the good idea, or a bad one. This seemed the easiest and most direct path.

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

I added the Blueimp CSS into my SASS workflow, and just changed the display properties of the control buttons to block. I have not unattached the click handler that toggles the gallery control class, so that still triggers.

Palmette

Answer 4

To disable clicks on image you can set toggleControlsOnSlideClick to false

Example :

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

Koreykorff