[Mitch]

Hey Steven,

OK, long ago we talked about additional ‘tabs’ (bio/notes) and you wisely declined to add more clutter (understandable), saying instead for me to add tabs in those existing windows.

I have tried this, but the images I place in the tabs in the bio window have some sort of js conflict as they don’t fully load — until you do something like press F12, then bam, they look great.

I have been working with the image plugin dev but he can not get script to make this work.

Finally, in testing I decided to just put the tabs code and the image code in a brand new page, and everything worked flawlessly. This led me to think is was something related to the way Connections interfaced with the other plugin(s).

Do you have any recommendations on what to try to get this type of configuration to work?

Thanks.

[Mitch]

To update:

• WP 4.2.2
• Kleo 3.0.3
• Connections 8.2.9
• cMap 4.1
• Tabby Responsive Tabs 1.2.1
• Global Gallery 4.0.3

And on the Connections page there are no related errors in console.

• This reply was modified 8 years, 3 months ago by Mitch.

[Steven Zahm]

@ Mitch

Can you point me to a page and entry where you are experiencing the conflict?

[Mitch]

This reply has been marked as private.

[Steven Zahm]

@ 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.

[Mitch]

Wow, droppin’ some knowledge there. :) That is so above my paygrade. Nice work.

I will follow these instructions, as well as pass it along to the GG dev. He has also been great at trying to work through this, so I’m sure he’ll appreciate your info.

In your opinion, would there be a better/easier/smarter way to resolve this conflict from HIS side?

Also, confirming this is not ‘upgrade-proof’? Upon any new cMap update I would need to do this again, correct?

Lastly, I have a general question. So when I delete the cmap.min.js file, and make changes to the cmap.js file, does the “system” automatically regenerate a minified file of .js?

Thanks!

[Steven Zahm]

@ Mitch

re: In your opinion, would there be a better/easier/smarter way to resolve this conflict from HIS side?

Really, I can’t see how he could fix it from his side. Honestly, my javascript skill level is only a tad above beginner. I’m just pretty good at debugging.

I’m certain the fix I gave will work though as I used an app called Fiddler. Using that app, I can tell it to monitor my net traffic and if it “sees” a specific file, respond with a defined file. Basically this lets me “hot swap” my local copy of a file in place of a file served from the server. Kind of letting edit a javascript file on your page without actually editing the “real” file. Doing that I was able to muck around with slick until I found the right combination of commands to make it “refresh” when the bio is opened.

re: Also, confirming this is not ‘upgrade-proof’? Upon any new cMap update I would need to do this again, correct?

Correct, not update proof… but if you drop the modified js file in this path instead of overwriting the original is should override the original and be update proof:

../wp-content/uploads/connections-templates/cmap/

You would have to create the folder because it will not exist.

The only problem here is if I update cMap and the JS also requires update to work it’ll never get loaded because of the override file.

re: Lastly, I have a general question. So when I delete the cmap.min.js file, and make changes to the cmap.js file, does the “system” automatically regenerate a minified file of .js?

Nope, it will not get automatically regenerate. Connections simply looks to see if it there and if it is loads it instead of the unminified version. Actually if there is neither file Connections will not try to load either one.

[Mitch]

Just thought I’d update the thread with the fact that this DID work perfectly.

Seriously, that’s some smarts there. Thanks for continuing to provide ridiculously great support.

Have a great day!

[Steven Zahm]

Great to hear! And, thanks!

[Author]

Posts