CODEWITHSUNDEEP
jquerytwitter-bootstrapcarousel
Mere Development
Mere Development

Reputation: 2519

Can I rename the Carousel in Twitter Bootstrap to avoid conflicts? If so how?

I'm using Twitter Bootstrap. I'm using the included carousel in one place on my website to rotate a list of DIVs, displaying one div at a time.

It's initiated like this:

$('.carousel').carousel({interval: 5000});

The Bootstrap Carousel is very very basic, and elsewhere in the site I need a carousel that allows me to display multiple items at once, add call-backs etc, so I want to use something like jq.carousel or jQuery Carousel. Both these use the same function name as the Bootstrap one, and are initiated like this:

var $carousel = $('.mycarouselclass').carousel();

So... there's a conflict. What different ways are there to use both plugins on one site? Is there a way to redefine one of the plugins so that it's called with a different name? If you think think I'm approaching this problem in the wrong way please say so, I'm very open to suggestion and learning :)

Additional info based on comments: I want to leave the minified plugin js files untouched if possible, so am interested in a way of renaming one instance externally so that future plugin upgrades are easy.

Upvotes: 2

Views: 1474

Answers (2)

baxang
baxang

Reputation: 3807

While Timm's answer is still valid, Twitter Bootstrap plugins provide own .noConflict() method for avoiding namespace collision.

For TB 2.3.x, see this page, and for the latest 3 follow this link. Both versions use the same method by the way.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

What I found by reading one of TB's plugin code is that the plugin preserves preloaded plugin which uses the same namespace in an internal variable var old = $.fn.carousel and puts it back when .noConflict() is called. It is convenient if the other plugin was loaded first and TB was loaded.

If you load TB first, you need to call .noConflict() before you load the other plugin that will use the same namespace. Otherwise later loaded one may occur errors.

Upvotes: 0

Timm
Timm

Reputation: 12753

Before you load in the second carousel plugin, you rename the function in the first one locally, like this:

<script type='text/javascript' src="bootstrapCarousel.js"></script>
<script type='text/javascript'>
    $.fn.bootstrapCarousel = $.fn.carousel;
    delete $.fn.carousel;
</script>
<script type='text/javascript' src="nonBootstrapCarousel.js"></script>

Then if you wanted the bootstrap version you'd call .bootstrapCarousel() and for the other one it's just .carousel().

Upvotes: 6

Related Questions