I'm creating a gallery of images using the
[gallery] shortcode and Jetpack's tiled gallery feature. When the user clicks on an image I'm triggering a carousel (Owl Carousel) with
carousel.trigger( 'to.owl.carousel', [ item_id, 0 ] ). The problem that I have is that I need to feed the trigger an index in order to have it jump to the correct item. I've previously done this by using jQuery
index() but that won't work with the tiled gallery because items are nested inside rows.
What I need to do is add a
data-index property to each item in the tiled gallery which I can then have correspond to the index in the carousel. Is there a way in which I can filter the gallery shortcode output in order to add this attribute as it loops through the images?
Off topic but an alternative solution might be leveraging
index() to index the items regardless of their nested row structure, like indexing
.item elements in relation to the parent of parent of parent container. Is that possible?