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?

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?

• filters
• shortcode
• jquery
• hooks
• gallery

Share Improve this question asked Apr 25, 2019 at 12:13 Kevin NugentKevin Nugent 56311 gold badge88 silver badges2020 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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).find('.tiled-gallery-item').each(function(){

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

        i++;
    })
})