ब्लूंप गैलरी: हमेशा "ब्लूंप-गैलरी-कंट्रोल" या "ब्लूंप-गैलरी-कंट्रोल" को दिखाने और छिपाने के लिए क्लिक हैंडलर को अनबिंड करने के लिए कैसे करें

Question

Blueimg Gallery का उपयोग करके मैं जानना चाहता हूं कि मैं हमेशा गैलरी नियंत्रण कैसे दिखा सकता हूं (.blueimp-gallery-controls) गैलरी में img class=".slide-content" पर क्लिक करते समय उन्हें दिखाने और छिपाने के बजाय।

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() को हटाकर उस त्रुटि से छुटकारा पाता है, हालांकि यह सब वास्तव में सही दृष्टिकोण नहीं है।

क्या सीएसएस में !important नियम के समान उपयोगकर्ता स्क्रिप्ट में इस स्क्रिप्ट से कमांड को ओवरराइड करने का कोई तरीका है? इस तरह, जब ब्लूंप गैलरी में एक अपडेट है, तो मैं स्रोत को बरकरार रख सकता हूं और नवीनतम संस्करण अपलोड कर सकता हूं।

शायद लेखक, सेबेस्टियन त्सचन, अगर यह बहुत ज्यादा नहीं पूछा जाता है तो संपर्क में रह सकते हैं?

किसी भी मदद वास्तव में बहुत सराहना कर रहा है :)

Answer 1

blueimp-gallery div के वर्ग blueimp-gallery-controls जोड़ना नियंत्रण दिखाई से शुरू + टॉगल कार्यक्षमता अभी भी काम करता है

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

आशा है कि मदद करता है बनाता है।

Answer 2

मुझे यकीन नहीं है कि अच्छा विचार, या बुरा है या नहीं। यह सबसे आसान और सबसे सीधा रास्ता लग रहा था।

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

मैं अपने एस.ए.एस.एस. कार्य-प्रवाह में Blueimp सीएसएस जोड़ा, और सिर्फ block को नियंत्रण बटन का प्रदर्शन गुण बदल दिया है। मैंने क्लिक हैंडलर को अटैच नहीं किया है जो गैलरी नियंत्रण वर्ग को टॉगल करता है, जो अभी भी ट्रिगर करता है।

Answer 3

चित्र पर क्लिक अक्षम करने के लिए आप गलत

उदाहरण के लिए toggleControlsOnSlideClick सेट कर सकते हैं:

<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

आदेश नियंत्रण आप अपनी गैलरी कंटेनर के लिए blueimp-गैलरी नियंत्रण वर्ग जोड़ने के लिए दिखाने के लिए।

आपका कंटेनर इस

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