CODEWITHSUNDEEP
jqueryimage-galleryblueimp
lowtechsun
lowtechsun

Reputation: 1955

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

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

Upvotes: 10

Views: 5471

Answers (4)

Manos Pasgiannis
Manos Pasgiannis

Reputation: 1783

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>

Upvotes: 6

Yoann Kergall
Yoann Kergall

Reputation: 3312

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>

Upvotes: 1

Aric Harris
Aric Harris

Reputation: 61

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.

Upvotes: 3

greetp
greetp

Reputation: 316

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.

Upvotes: 20

Related Questions