Twitter Bootstrap Carousel using 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 that template.

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

The Carousel is making every second image not visible to the user due to the Carousels changing style attribute, but the user should see every slide.

I have looked already into the sourcecode of the Carousel Plugin and Mootools JS Files but sadly couldnt work out the cause of the problem. I thought maybe its some naming-problem of functions/classes between jQuery and Mootools but couldnt find any problem there.

I hope you can help me out here.

Edit: I figured out it has something to do with the Fx.Slide class of mootools-more.js, deleting the class out of the sourcecode solved the problem. But thats still no really solution, any help is still very appreciated.

Messalina

@Andres Ilich Thanks for fixing the tag – Messalina

It's working fine on my browser (just tried the jsfiddle link): Chrome 18 Mac OS I see three different images, one normal, one with text with green border and one bigger. – Coventry

Yes your right, thanks. Thats my bad there, I did the workaround with commenting out the Fx.Slide class from Mootools there and forgot to change the link of the JS-file. I removed the comments with this jsfiddle.net/U2pHH/11 – Messalina

Answer 1

The problem is that Mootools more is in conflict with twitter bootstrap, that's why its acting weird the carousel. I suggest you using just jQuery or just Mootools. There is a bootstrap Mootools implementation here: https://github.com/anutron/mootools-bootstrap

Coventry

Thanks for the reply. I have seen bootstrap for Mootools, too, but havent seen there any implementation yet for the equivalent Carousel plugin of the bootstrap for jQuery. Maybe I should just stay with the workaround and wait until there is an implementation or participate and help create it. – Messalina

Answer 2

Here is the 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);
}

Edora

Well, this IS THE EXACT ANSWER TO THE QUESTION. It solves the issue. Thanks you a lot, Benn!! – Prosaic

I agree - this works perfectly!!! No need to mess around disabling Mootools (which caused me headaches with other modules even when I disabled it with a Joomla extension) - simply add it after your usual document ready code. – Winsor

I get this TypeError: $(...)[index] is undefined $(this)[index].slide = null; The other code by @semyon worked better. – Corron

this worked for me - really took me a while to even see what was happening mostly because I made the carousel properly responsive as it isnt OOTB and need a fixed height set. Thank you so much for sharing and fixing that one Benn. It would be nice to understand what was the issue I got as far as disabling the mootools and then it started to work but obviously that wasn't a solution. – Cq

Answer 3

Another implementation of the same thing that Benn provided is

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

What I finally ended up with - I created custom Mootools More build without Fx.Slide

Prosaic

This worked for me, thanks so much. With the previous answers I was getting: TypeError: $(...)[index] is undefined $(this)[index].slide = null; – Corron

Thx! Works better than other one. – Inapprehensive

Answer 4

Having the same issue. I'm using a plugin called JB Library ( http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin ) and this has options to remove Mootools and/or Mootools More from the admin. After turning 'off' Mootools More the issue with the Carousel is 'fixed'. Might be an easier sollution than commenting stuff out with regards to updates. Unless you need mootools-more.js for other stuff on the site of course.

Hopefully a better sollution comes along soon.

Harkins

Answer 5

Had the same issue: Bootstrap carousel was not working in registered frontend, since mootools-more.js loaded.

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

Hinge

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);

Goddard

please explain what this code does and how it solves problem of the user. – Sidwell

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Guava