Reply To: conflict with tabs in bio

06/23/2015 at 8:30 pm #338273
Steven Zahm
Keymaster

@ Mitch

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 Global Gallery author is init’ing carousel thru jQuery on the document ready event. The javascript code is output inline right after the html for the 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.

Delete the 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.