V5 Beta Option arrowKeys: false, has no effect
I used this code:
import PhotoSwipeLightbox from './res/photoswipe-lightbox.esm.js';
import PhotoSwipeDynamicCaption from './res/photoswipe-dynamic-caption-plugin.esm.js';
const options = {
arrowKeys: false,
gallerySelector: '#gallery',
I did expect that the arrow buttons would disappear, but they are still visible.
Do I something wrongly or is this a bug?
Is there also an option to hide the toolbar with the buttons?
BTW this works:
lightbox.on('afterInit', () => {
document.querySelector('.pswp__top-bar').style.visibility = "hidden";
document.querySelector('.pswp__button--arrow--next').style.visibility = "hidden";
document.querySelector('.pswp__button--arrow--prev').style.visibility = "hidden";
})
arrowKeys is an option to enable or disable keyboard navigation.
To remove the arrow buttons, try:
arrowPrev: false,
arrowNext: false
It works for removing the zoom and close buttons too, just set zoom and/or close to false.
You can also set counter to false
If it doesn't work, try:
arrowPrevSVG: '',
arrowNextSVG: ''
To remove the arrow buttons, try:
arrowPrev: false, arrowNext: false
Yes, that works too, but in that case I can't use next code to solve the right arrow problem:
lightbox.on('change', () => {
document.querySelector('.pswp__button--arrow--next').style.zIndex = "9999";
});
So I will use the method I did give above.
To remove the arrow buttons, try:
arrowPrev: false, arrowNext: falseYes, that works too, but in that case I can't use next code to solve the right arrow problem
If you don't want to show the arrows... There is no more issue to solve with superposition and you don't need that code anymore, right? ... 🤔
Correct, but some of my users like to hide these buttons on mobile devices, but not on PC's, so in that case I have still to solve the issue.
Yup, but we still can hide the ui elements with a single tap on screen. :) I like that feature
Aha, I did not know that.
Thanks for this tip!