Gallery module breaks menu (Foundation)

[FriscoTX]

Wondering if anyone else having this issue on Foundation-based sites?

On several sites that use Foundation, if the client inserts a generic photo gallery module on a page, then when visiting that page, hovering over any menu item with a dropdown then un-hovering will cause the menu to disappear...  doesn't happen on pages without a gallery module. 

Here is an example, using an otherwise unmodified BC Gurus template:

https://bcg-gallery-menu.worldsecuresystems.com/test-gallery (new page, default template, on a clone of the template with gallery inserted - no other changes)

(Sent to both BC and BC Gurus)

See the effect in this short video

[TheColourfulOwl]

Hiya,

I've seen this happen before.

The Cause:

The menu in constructed using an un-ordered list (ul). The default image module uses an un-ordered list to display the images. There's a conflict with the JS BC injects into the page for the image gallery. Basically the JS that BC adds is instructing the page hide any un-ordered lists when it's not in focus, by adding a style="display:none;" to the ul tag.

The Solution:

Update the Menu Module template so instead of using ul + li you uses divs. (If you replace the ul tag with a div tag in the inspect element before hovering over the menu dropdown, you'll see it doesn't disappear when you do). You'll of course need to update the CSS to support this change.

You can find the menu templates inside the DEV area here:

An alternative would be to use a custom image gallery instead of the standard BC one. You can inject your own or you can install an app from the app store:

BC Gallery App for Adobe Business Catalyst

Photo Album Pro App for Adobe Business Catalyst

I'm a little surprised that BC Gurus hadn't detected this conflict before putting the templates public :/.

Kind regards,

Nate C.

[FriscoTX]

Thanks much -- I'll check out what you sent

(In BC Guru's defense, their template uses a custom liquid gallery that works properly -- we have many clients in a niche where they want to create their own galleries frequently and insert them on their own pages, in a non-ecommerce plan site, so expecting them to use liquid custom galleries is not really an option.)

[Liam Dilley]

That totally can be done Bill. You do not need to do that.

IF say your adding gallery to products then its a simple matter of the ID they put in a custom field and added the images into the gallery.

Your doing all the magic/work for them.

It is very rare in my jobs clients will ever add modules or BC bits themselves.

[TheColourfulOwl]

No worries. If you have any issues feel free to drop me a message . Your best emailing me, nate@colourfulowl.com

(Yea i get it. I've used alot fo BC gurus templates myself. But, to counter that, their templates are meant to be for 'Joe blog MD of some company' trying to create a website. They should really make the templates function with the default options, and add on top of that as an added bonus. But, that's just my thought =p.)

[Ricardo_A1]

This is a library conflict with BC JavaScript added to the header of the site to fix it you need to either change the template of the module used to foundation scripts an example I got in trouble was with products popplets module if it output as standard it would conflict then if you enter it like {tag_poplets,4,100,100,noscript} you get it sorted.

in your particular case I would try output the gallery as suppressed template and create a liquid template and use foundation orbit gallery organising the order of your scripts. Should definitely work.

[john_stephanites]

is there a foundation app on app store for bc that helps this? I know it is an extra cost but was wondering if it works well. I am thinking of changing all my sites from here on out to Foundation.

[Ricardo_A1]

Bc scripts could be the main cause of these conflicts but I forgot to mention other libraries dependencies could also conflict using Foundation, best case scenario would be organising your scripts which is something that takes some time to find the right structure to allow a good site functionality to flow in order.

I suggest you check your scripts see if they require a more advanced usage with other libraries.