How do I resolve the conflict between MB2 Portfolio component slider and /media/system/js/mootools-core.js?

Question

I am using MB2 Portfolio with the built in slider to display some projects.

The problem is that every other image in the sliders collapse. Inspecting them with FireBug shows that every other div is set to a negative position by a javascript.

margin: -227px 0px 0px; overflow: hidden;

Disabling the Mootools Core JS in the header will allow the sliders to function properly, but that breaks my responsive menu.

Example Links: http://grapeinc.com/portfolio-test/sales-galleries The sliders on this page collapse on every other image.

http://grapeinc.com/deleteme.html MB2 Portfolio with sliders working on this page, but the responsive menu (upper left) is malfunctioning. The Mootools Core JS has been commented out in the header.

Answer 1

People have used the following plug-in to resolve MooTools/JQuery conflicts - http://extensions.joomla.org/extension/jquery-easy - this may provide a quick, temporary fix.

Since it is bad practise to have both these libraries on one site, I would recommend that even if this works you still look into replacing the MooTools extension. Two such libraries is unnecessary bulky code-wise, they cause conflicts like this, plus Joomla now is focussed on JQuery, and MooTools is deprecated, so may be removed at some point in the future.

Any extension using MooTools on a Joomla 3 site's front-end is a warning sign that it needs updating. If it is a third party extension, I'd check for new versions. If none are available, it is either badly coded or no longer supported.