Gallery Lightbox does not point to the right slide

Support
#1

Hi
I use Pro Theme an ACF and want to show a grid Gallery with clickable columns, that point to a slider in a modal who shows the same images. I did exactly what you said here:
https://www.youtube.com/watch?v=ASv_W7z74C4
The modal slider opens, but always on the first slide.


Hope you can help.
Best regards,
Hannes
#2

Hello Hannes,

Thanks for writing to us

To help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

Thank you - you will find the credentials in the the secure note.

#4

Hello @salilou,

It might be an issue in the mobile version. I would suggest disabling the mobile version container and checking it again. You should also purge your browser cache and recheck it.

Thanks

#5

Thank you very much - this works.
I want to keep the mobile gallery.
What can I do to make this work?
Is it about the IDs?

#6

Hey @salilou,

Yes, it is indeed related to the IDs and how the elements are duplicated for the mobile container.

When you duplicate containers or sections to build a separate mobile layout in the Pro Theme, you end up with multiple sliders (and potentially multiple modals) on the same page. When you click an image to open the modal, Cornerstone’s dynamic slide handler (data-x-slide-goto) gets confused because it doesn’t know which slider to target, defaulting to the first one it finds in the page source (which is the hidden desktop version).

To make it work for both desktop and mobile, you need to explicitly link each grid trigger to its respective slider using the data-x-slider-id attribute.

Here is exactly how you can set this up in the Cornerstone builder:

Step 1: Assign Unique IDs to Your Sliders

  1. Open the builder and select the Slider element inside your Desktop Modal.
  2. Go to the Customize tab, and in the ID field, enter a unique ID (e.g., desktop-slider).
  3. Select the Slider element inside your Mobile Modal.
  4. Go to the Customize tab, and in the ID field, enter a unique ID (e.g., mobile-slider).

Step 2: Update the Attributes on Your Gallery Grid Triggers

Now, you need to tell each image grid trigger which slider ID to target.

For the Desktop Grid (Looper Consumers / Images):

  1. Select the image or column element that acts as the click trigger.
  2. Go to the Customize tab.
  3. Under Custom Attributes, add a new attribute:
    • Name: data-x-slider-id
    • Value: desktop-slider (matching the ID you set in Step 1)
  4. Keep your existing data-x-slide-goto attribute set to {{dc:looper:index}}.

For the Mobile Grid (Looper Consumers / Images):

  1. Select the image or column element that acts as the click trigger in your mobile version.
  2. Go to the Customize tab.
  3. Under Custom Attributes, add a new attribute:
    • Name: data-x-slider-id
    • Value: mobile-slider (matching the ID you set in Step 1)
  4. Keep your existing data-x-slide-goto attribute set to {{dc:looper:index}}.

Step 3: Check Your Modal Hashes (If Modals are Duplicated)

If you duplicated the modal container itself (meaning you have one modal for desktop and one for mobile):

  • Make sure they have unique Toggle Hashes (for example, #galerie-desktop for the desktop modal and #galerie-mobile for the mobile modal).
  • Update the link URLs (or the onclick scripts) on the respective grid triggers to target the correct modal toggle hash.

Once you have saved the changes and cleared your browser/site cache, the mobile layout gallery should correctly talk to the mobile slider, and the desktop gallery will talk to the desktop slider.