Wrong order of the images when used in Bricks’ slider

[ad_1]

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?

  • This reply was modified 2 hours, 15 minutes ago by Arno Welzel.

Forget my comment about PhotoSwipe 4 or 5 – you already mentioned, that this did not make a difference.

Hello Arno,

Thanks for the quick reply. I’ve sent you the credentials, plus some additional info.

Good luck with the debugging and feel free to ask me for any assistance.

Thanks

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.

Still no success? I’ve tried to send it to you from another address. The email was the one starting with privat from your site.

The second e-mail got through right away, thanks.

Excellent. Just one more observation (but you’ve probably spotted it too already):

It seems like the lightbox queue gets splitted into 2 parts, one part being the currently visible images in the slider and the other is the rest of the images (excluding the slider part). Then the second part is inserted before the first one.

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 -1 so 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 0 as 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 -1 will 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 -1

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

I will provide an update which will fix the wrong sorting of the lightbox collection in this case.

Version 5.1.5 was just released and fixes this problem.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer