Multiple Masonry acf galleries

Hello,

I have a “service” CPT with 5 services that are displayed on a section using tabs (bootstrap tab). In each tab, I get the acf fields and wp data from the CPTs (no ajax here).

One of the ACF fields is a gallery (with masonry design), so I can have on the same page 5 ACF galleries (1 gallery per tab).

When the page is loaded, the first tab is opened and the gallery is displayed correctly. However, when I switch to another tab that also has a gallery, the images are all “flattened” at the top left of the container. When I click on the load more button, page 2 loads and the display becomes normal again, except that if I go back to the first tab, I have a display bug again.

I tested without the masonry (transition=”fade”) and everything works correctly, I noticed, via the chrome console dev, that when I click on the load more button of tab 4 for example, the css attributes of positions (left, top, etc.) also change on the elements of the gallery of tab 1. So I guess it’s a JS problem

Is it possible to have multiple galleries using Masonry + load more button on the same page ?

Shortcode:
[ajax_load_more button_label="View More +" scroll="false" preloaded_amount="6" posts_per_page="6" seo="true" acf="true" acf_field_type="gallery" acf_field_name="img_gal" transition="masonry" masonry_selector=".grid-item-' . $cpt_post_id. '" masonry_animation="slide-up" images_loaded="true"]

The variable $cpt_post_id contains the post_id of my CPT, which allows me to use one masonry_selector per gallery. (galleries are created dynamically in a WP loop)

The alm tempalte used:

<li class="grid-item-<?php echo $post_id; ?>">
      <a>" class="popup">
      <img />" alt="<?php echo $image['alt']; ?>" />
   </a>
</li>

I only have that CSS

.ajax-load-more-wrap ul.alm-listing li[class*='grid-item-']{
   width: 30%;
   margin: 0 1.5% 3%;
   float: left;
   display: inline;
}
.ajax-load-more-wrap img {
    display: block;
    width: 100%;
	border-radius: 4px;
}
@media screen and (max-width: 480px){
   .ajax-load-more-wrap ul.alm-listing li[class*='grid-item-']{
      width: 100%;
      margin: 0 0 20px;  
   }
}

I’m using Oxygen Builder
I’m working on this site locally but if really needed, I can make a preprod version.

Can you help me ?
Thanks !

Here some screenshots:

Tab 1 just after page loading : https://paste.pics/13894258fe9efd9d0921c55c3fa09285

Tab 5 with an ACF gallery after switching from tab 1 to tab 5: https://paste.pics/daafde46d1e3f7c77823997cf7b01eb0

Tab 5 after clicking on load more button (correctly displayed) : https://paste.pics/d9c54fd9d29f0c4b7d997f00164406be

Switching back on tab 1 : https://paste.pics/52673bef40d4208a4abc85374f06bcf3

On dev console, we can see the height of the bugged <ul> container is only 36px, not sure if it’s related : https://paste.pics/1d5734dd482a28ac6442bd5935f6bc3f

• This topic was modified 4 years, 6 months ago by qtpweb.
• This topic was modified 4 years, 6 months ago by qtpweb.