Twitter Bootstrap Carousel with Joomla and its Mootools

Question

I am working on a template for Joomla 2.5.x using Twitter Bootstrap. I also want to use the Bootstrap Carousel plugin for this template.

I have a problem when Carousel is used with a Joomla Mootools implementation. The style of the Carousel element changes with a negative margin, making it invisible to the user. To show you what exactly is happening, I have prepared for you jsfiddle http://jsfiddle.net/U2pHH/11/ .

The carousel makes every second image invisible to the user due to the carousel style attribute, but the user must see every slide.

I already looked at the source code of the Carousel plugin and the Mootools JS files, but, unfortunately, I could not solve the cause of the problem. I thought maybe its some problems with function / class names between jQuery and Mootools, but could not find any problems there.

Hope you can help me here.

Edit: I realized that this has something to do with the Fx.Slide mootools-more.js class, removing the class from the source code solved the problem. But this is still not a solution, any help is still very much appreciated.

Answer 1

The problem is that Mootools is more in conflict with twitter bootstrap, so its action is weirdly carousel. I suggest you use only jQuery or just Mootools. Here's the implementation of bootstrap Mootools: https://github.com/anutron/mootools-bootstrap

Answer 2

Here is a fix specific to Joomla and mootools more,

add this code after jq call, it can be in any js file

add

if (typeof jQuery != 'undefined') { (function($) { $(document).ready(function(){ $('.carousel').each(function(index, element) { $(this)[index].slide = null; }); }); })(jQuery); } 

Answer 3

Another implementation of the same as Benn is

 if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined' ) { Element.implement({ slide: function(how, mode){ return this; } }); } 

What I finally finished - I created custom Mootools More build without Fx.Slide

Answer 4

With the same problem. I use a plugin called JB Library ( http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ) and it has options for removing Mootools and / or Mootools More from admin. After you turned off Mootools, the problem with the carousel is “fixed”. Perhaps this will be easier to resolve than to comment on things regarding updates. Unless you need mootools-more.js for other things on the site, of course.

We hope that a better solution will be reached soon.

Answer 5

There was the same problem: the Bootstrap carousel did not work in the registered interface, since mootools-more.js was loaded.

My solution: JQuery Easy Plugin ( http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery ) with the option "Remove Mootools when possible" in the "Advanced Options" section.

Answer 6

  (function($) { $(document).ready(function(){ var bootstrapLoaded = (typeof $().carousel == 'function'); var mootoolsLoaded = (typeof MooTools != 'undefined'); if (bootstrapLoaded && mootoolsLoaded) { Element.implement({ hide: function () { return this; }, show: function (v) { return this; }, slide: function (v) { return this; } }); } }); })(jQuery);