Data-x-slide-goto

[coverberg]

Hi I am developing a lightbox style grid gallery using ACF images. These open a slider that I would like to be connected to the image that is clicked. Basically the same as this post:

Data-x-slide-goto Problem

Hi, I have a grid of images which are linked to a modal, which operates as a lightbox slideshow. In the Cornerstone preview of the page, I can click on any image in the grid and the modal displays the correct image in the slideshow. [2024-07-05_15-09-03] However, on the front end, clicking exactly the same image brings up image #1 in the grid, rather than the image being selected. [2024-07-05_15-20-35] I have checked the custom attributes and they appear to be correct. [2024-07-05_15-16-…

However the custom attribute data-x-slide-goto isn’t working. I have tried the two steps in the above forum post however with no success. Please advise how to resolve this issue. The page I am working on is here:

Carini Cavern | Big Powderhorn Lodging | Pioneer Lodging

Also, while not necessary, I am wondering if it is possible to output the grid with random images as opposed to images in the same order every time. Thanks for your help!

[ruenel]

Hey @coverberg,

Thanks for writing in! It seems that you have not added data-x-slider-id custom attribute in your page. This is needed because you have two Sliders on the page. Please check the number 2 in my response on that thread.

Best Regards.

[coverberg]

Thanks for the response. I have a custom attribute entered in for that section (see screenshot). Maybe it’s not correct?

[ruenel]

Hey @coverberg,

The Slider must also have an ID. If you do not mind, we can take a look at your Slider settings if we can access the site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Thanks.

[coverberg]

Ok thank you, yes you can access and make changes.

[ruenel]

Hey @coverberg,

You need to add an ID to the Slider inside the Modal first.

And then you add the data-x-slider-id custom attribute to each of the gallery thumbnails items which in your case is the Column element.

Hope this makes sense.

[coverberg]

Ahh ok. That worked great! Thank you so much!

[ruenel]

You are most welcome, @coverberg.