search

blueimp / Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
https://blueimp.github.io/Gallery/
Other
3.76k stars 984 forks source link

Option to deactivate or reactivate keyboard navigation #249

Closed calaoa closed 4 years ago

calaoa commented 4 years ago

Hi everyone, Hi blueimp,

While implementing a Vue wrapper for blueimp Gallery with ability to edit an image caption directly from the gallery, I have the following question: would there be a way to temporarily deactivate the keyboard shortcuts (typically while editing such a caption, we don't want the arrows to fire a slide change but rather navigate the edited text), or would this require a change in the code? What's your take on this?

Demo : https://codesandbox.io/s/vue-blueimp-gallery-y8b77

Cheers 👏

blueimp commented 4 years ago

Hi @calaoa,

while this is not an official API, you do have access to the options property on the Gallery object, which allows you to change the keyboard related options during runtime, e.g.:

var gallery = blueimp.Gallery(links)

gallery.options.toggleControlsOnEnter = false
gallery.options.toggleSlideshowOnSpace = false
gallery.options.enableKeyboardNavigation = false
gallery.options.closeOnEscape = false

This allows you to temporarily disable and reenable the keyboard shortcuts.

calaoa commented 4 years ago

Thank you @blueimp it works great indeed, closing this issue then!