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!