Assistance with data-x-slider-id Custom Attribute for Photo Gallery

Hi Themeco Team,

I am currently working on building a photo gallery using the slider element in Cornerstone. My goal is to have the gallery navigable by thumbnails and allow images to be clicked on for an enlarged view (lightbox).

Following Josh Donnelly’s video, “Cornerstone gallery slider using native elements,” I have mostly gotten the thumbnail navigation working as intended using the data-x-slide-context attribute. However, I’m encountering issues with the click navigation, which causes the gallery to animate unexpectedly.

I have also tried to implement a modal gallery for the lightbox effect based on another Josh Donnelly video, “Image lightbox for your ACF Galleries - Cornerstone Modal Element.” Following his instructions, I added onclick="location.href='#gallery';" and the data-x-slide-goto custom attribute, but the correct image does not display in the modal.

I suspect the data-x-slider-id attribute might be crucial here, as the documentation mentions it is required to reference a slider in a Modal or another element that isn’t displayed in the typical markup location. However, there is limited information available on how to effectively use this attribute.

Could you please provide more details on how to properly use the data-x-slider-id attribute? Any additional insights or examples would be greatly appreciated.

I am working on a high-profile client site, so I would prefer to share sensitive data through your secure message functionality if needed.

Thank you for your assistance!

Take a look at our Image Lightbox Gallery template we are launching on the themeco templates tab next week. data-x-slider-id would be placed in the custom attributes of element that is utilizing data-x-slide-goto. data-x-slider-id would relate to the ID of the slider, which would be placed in the Customize tab as you seen in the screenshot.

Let us know if this helps. Have a great weekend.

image

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.