I see the issue… first, I’m sure you noticed that if you click thru to view the detail page the Global Gallery works just fine too. So, it is actually working just fine with Connections.
So what’s the issue you ask…
Well, because the bio field is hidden until clicked the width of that area is 0 (zero). When Global Gallery goes to render the gallery, it is based on that 0 width so you get that wonky layout.
Now, try this. refresh the page, open the bio, now simply resize the window. Any size, it doesn’t matter. Boom, since the Global Gallery is responsive the window resize triggers Global Gallery to resize the gallery on the width which is something not 0. And it is not 0 because the bio was open when you resized the window.
Now that we know the issue, what is the solution…
The specific gallery slider you are using thru Global Gallery is slick carousel.
The trick would be to refresh the carousel after the bio link is opened. Perhaps adding this:
$('.gg_carousel_wrap').slick('slickSetOption', 'slidesToShow', 5, false); $('.gg_carousel_wrap').slick('slickSetOption', 'slidesToScroll', 5, true);
to cMap would force all instances of slick to refresh its positioning.
cmap.min.js file so Connections will not try to load it. The add the above line after this line:
$( '#' + div ).slideDown();
in the `cmap.js’ file.
It is very likely you’ll have to force refresh the browser so the updated file is downloaded by the browser.
That should fix it.
PS. if you change the settings in Global Gallery of how many slides to show and how many slides to scroll (assuming those options exist), you’ll have to update the value in
cmap.js to match.