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?


So I've solved the issue by looping through all of the items by class and indexing them with a data attribute.

$( '.tiled-gallery').each(function(){

    var i = 0;


        $(this).attr( 'data-index', i );


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.