Wrong order of the images when used in Bricks’ slider
-
I’m facing a very strange issue. When your lightbox is used for the image slider, the order of the images in the lightbox seems to be changed depending on the position of the slider. As it seems the images in the lightbox are divided to several blocks which are then somehow shuffled.
It’s really hard to explain, so I’ve created a video for you: https://watch.screencastify.com/v/5ewLYvLbq0zq86F9txl6
The test page is here: https://zahradnictvifous.cz/work/gallery-slider-test/
Please also note, that the first image in the slider has number 10/12 instead of 1/12.
The site uses Bricks, which is a theme with a page builder included. The Slider comes from the builder and uses SplideJS library. The Bricks has also natively included Photoswipe library for the lightbox, but their settings are very limited so I prefer to use your plugin.
Interesting thing is, that when the Bricks’ native lighbox solution is used, everything works fine – see https://zahradnictvifous.cz/work/gallery-slider-test-native-lightbox/
I have contacted the developer, but he responded that the problem must be caused by your plugin, because the slider outputs the images in the correct order. He’s probably right, as the native lightbox works just fine. I have to say I’m quite buffled.
Debugging notes:
- I have tried to turn on and off every possible setting of your plugin, but issue stayed the same
- The Photoswipe is on version 4, but it makes no difference when changed to 5
- At this moment there are 2 versions of the lightbox on the site, yours and Bricks’ native. Normally I turn the Bricks’ version off, but now it’s on to show you it works fine. No difference made if your lightbox is the only one.
Have you got any idea, why is this happening? If necessary I can provide you with the credentials to the test site.
Thanks
-
No, just by looking at the site I don’t have any idea at all what is wrong here.
I can see in the source code that the images are in the order as expected from 1 to 12 and I don’t understand, why the frontend is not using them in this way. Also the query selector for images without a specific group ID works as expected in a JavaScript console – this is the important part:
document.querySelectorAll('a[data-lbwps-width]:not([data-lbwps-gid])');Having credentials to the test site, so I can upload a debug version of the plugin with additional output in the JavaScript console would help. You can contact me via e-mail, see here: https://arnowelzel.de/en/about-me. I can also provide a URL for a secured upload via e-mail if you don’t want to send credentials using unencrypted e-mail.
Just to be sure: at the moment it seems you are using PhotoSwipe 4. Can you please test switching to PhotoSwipe 5 if this changes anything?
I got the notification about your comment here via e-mail, but your e-mail to me did not arrive yet (yes, I also checked my spam folder).
Edit: all ok – the delivery attempt got greylisted since your mail provider is listed on a blacklist at the moment. I’ll just wait for it, it should arrive later.
The problem is, that the slider modifies the “tabindex” attribute of the images (also see tabindex documentation here). However, Lightbox with PhotoSwipe respects this attribute, so you can manually change the sort order in the lightbox collection if needed (also see the FAQ about this).
I believe the idea here is, that the slider will only make those images accessible with the [Tab] key which are currently visible in the slider while all images outside the slider get a tabindex of
-1so you can not navigate to them using the keyboard. This is perfectly OK, but indeed this is something I did not consider in the frontend scripts.At the moment with version 5.1.4, images which do not have a tabindex set, will be treated like having
0as tabindex so they get sorted to the beginning of the collection, assuming, that tabindex is either not set at all or set to a positive number. However a tabindex of-1will just be used as it is – so all images which are currently not visible in the slider will be sorted in front of the currently visible ones.So the initial gallery looks like this:
Image 1 – tabindex not set (null)
Image 2 – tabindex not set (null)
Image 3 – tabindex not set (null)
Image 4 – tabindex set to -1
Image 5 – tabindex set to -1
…
Image 12 – tabindex set to -1And when you switch to the next image in the slider:
Image 1 – tabindex set to -1
Image 2 – tabindex not set (null)
Image 3 – tabindex not set (null)
Image 4 – tabindex not set (null)
Image 5 – tabindex set to -1
…
Image 12 – tabindex set to -1I will provide an update which will fix the wrong sorting of the lightbox collection in this case.
- The topic ‘Wrong order of the images when used in Bricks’ slider’ is closed to new replies.
