Blueimp Gallery: всегда показывать "blueimp-gallery-controls" или как отключить обработчик кликов, чтобы показать и скрыть "blueimp-gallery-controls"

используя Галерея Blueimg Я хотел бы знать, как я всегда могу показать элементы управления галереи (.blueimp-gallery-controls) вместо того, чтобы показывать и прятать их при нажатии на img class=".slide-content" в галерее.

глядя на галерею blueimp.минута.js (что я украсил с онлайн JavaScript beautifier я нашел несколько обработчиков кликов, также указывающих на функцию переключения для элементов управления галереей.

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

мне кажется, что просто комментируя эти 4 строки дают мне желаемое поведение. Однако мне не очень нравится менять оригинальный сценарий.

это также бросает Uncaught TypeError: undefined is not a function ошибка в самом конце (this.toggleControls()) внутри этой части скрипта.

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() С конца этой строки в скрипте избавляется от этой ошибки, однако все это не совсем правильный подход, я думаю.

есть ли способ переопределить команды из этого скрипта в пользовательском скрипте, аналогичном the !important правило в CSS? Например, когда у Blueimp Gallery есть обновление, я могу оставить источник нетронутым и загрузить последнюю версию.

любая помощь очень высоко ценится :)

9
blueimp image-gallery jquery

4 ответов

добавить класс blueimp-gallery-controls до blueimp-gallery div делает элементы управления видимыми с самого начала + функция переключения все еще работает

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

надеюсь, что это поможет.

17

для отображения элементов управления необходимо добавить класс blueimp-gallery-controls в контейнер галереи.

ваш контейнер будет выглядеть так

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

Я не уверен, хорошая идея или плохая. Это казалось самым простым и прямым путем.

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

Я добавил BLUEIMP CSS в свой рабочий процесс SASS и просто изменил свойства отображения кнопок управления на block. Я не отключил обработчик click, который переключает класс управления gallery, так что все еще срабатывает.

3

чтобы отключить клики по изображению, вы можете установить toggleControlsOnSlideClick в false

пример :

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