Blueimp Gallery: Zeige immer "blueimp-gallery-controls" oder wie man den click handler zum ein- und ausblenden von "blueimp-gallery-controls"

Question

Mit Blueimg Gallery möchte ich wissen wie ich die gallery controls immer anzeigen kann (.blueimp-gallery-controls) anstatt sie anzuzeigen und zu verstecken, wenn Sie auf img class=".slide-content" in der Galerie klicken.

Mit Blick auf dem blueimp-gallery.min.js (die ich mit Online JavaScript beautifier verschönerte Ich habe mehr Klick-Handler gefunden, auch die Toggle-Funktion für die Galerie Kontrollen anzeigt.

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

Es scheint mir, dass einfach diese 4 Zeilen gibt mir das gewünschte Verhalten zu kommentieren. aber ich nicht wirklich den Original-Skript ändern möge.

Doing so auch einen Uncaught TypeError: undefined is not a function Fehler ganz am Ende (this.toggleControls()) in diesem Teil des Skripts führt.

Löschen , this.toggleControls() vom Ende dieser Zeile im Skript wird diesen Fehler los, aber all dies ist nicht wirklich der richtige Ansatz, denke ich.

Gibt es eine Möglichkeit zum Überschreiben der Befehle aus diesem Skript in einem vom Benutzer hinzugefügten Skript, ähnlich der !important Regel in CSS? Wenn Blueimp Gallery ein Update hat, kann ich die Quelle intakt lassen und die neueste Version hochladen.

Vielleicht ist der Autor, Sebastian Tschan, könnte in der Lage sein, in Kontakt zu treten, wenn es nicht zu viel verlangt wird?

Jede Hilfe ist wirklich sehr geschätzt :)

Answer 1

die Klasse blueimp-gallery-controls zum blueimp-gallery div Hinzufügen macht die Bedienelemente sichtbar von Anfang + Umschaltfunktion noch funktioniert

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

Hoffnung, das hilft.

Answer 2

Ich bin mir nicht sicher, ob die gute Idee, oder eine schlechte Idee. Dies schien der einfachste und direkteste Weg zu sein.

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

Ich habe die Blueimp CSS in mein SASS Workflow und verändert nur die Anzeigeeigenschaften der Steuertasten auf block. Ich habe den Click-Handler, der die Galeriesteuerungsklasse umschaltet, nicht aufgehoben, so dass er immer noch ausgelöst wird.

Answer 3

Um Klicks auf das Bild zu deaktivieren Sie toggleControlsOnSlideClick auf false

Beispiel festlegen:

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

Answer 4

Um die Kontrollen zu zeigen Ihnen die blueimp-Galerie-Kontrollen Klasse zu Ihrer Galerie Container hinzuzufügen haben.

Ihr Container wird so aussehen

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

Sie können dann durch Überschreiben der Standardoptionen des Click-Handler entbinden. Es ist wichtig, die Optionen vor dem Initialisieren Ihrer Galerie zu überschreiben.

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