jCarousel unload / disable / remove

Question

I am using jCarousel to have a carousel of images in my page. It works great and have no complaints, but I am using the tabbing on the page and when I goto another tab, it get an ugly jCarousel error. Basically what I want to do is to remove the jCarousel from my element when I goto a new tab but for the life of me can't figure it out

To add the carousel I am using code like this $("#myelement").jCarousel({ /* config params */});

But I am unsure of how to remove .jCarousel from $("#myelement") any ideas?

score 3 · Answer 1 · answered Jun 19 '12 at 00:43

In addition to PaDalton's answer, I also detached the resize event from the window as my carousel was inside a (colorbox) popup box.

$(window).unbind('resize.jcarousel');

When the event got triggered, the $(this).dimensions(e) line sent the alert message as the li node didn't have a size, it thought the the object was to be displayed but without a size it would not be able to compute the carousel dimensions properly.

The error message was Infinite Loop - no width or height set

score 2 · Answer 2 · edited Nov 22 '11 at 18:58

Here is my way to remove the element and not get an error:

function mycarousel_initCallback(carousel){

$("#main_holder").mouseenter(function(){
    if(document.getElementById("event_scroller")){
        carousel.startAuto(2);
    }
}).mouseleave(function(){
    carousel.stopAuto();
});

$("#main_holder a").click(function(){
    carousel.stopAuto();
    carousel.remove();
});};

$(document).ready(function(){
$("#event_scroller").jcarousel({
    scroll: 1,
    wrap: 'circular',
    vertical: true,
    animation: 700,
    initCallback: mycarousel_initCallback
});
});

when we click on a link in the mainarea, my jCarousel element will be removed from another script so we have a handler for this witch is stopping the carousel and than .remove .

I've tried to do this outside the callback but it seams that the jCarousel is only controllable from inside the callback.

Christian Schulz · Answer 3 · 2011-01-11T17:43:00.803

Here is my solution for this ugly js error "Jcarousel: No width/height set for items ...". Try to avoid double initialization of jCarousel.

var carousel_initialized = false;

if(!carousel_initialized) {
jQuery('#mycarousel').jcarousel({
    ... // all your parameters
    initCallback: function() {
        carousel_initialized = true;
    }
});

Or try to get an instance of jCarousel like

carousel_initialized = $("#mycarousel").data('jcarousel');
if(!carousel_initialized) {
    jQuery('#mycarousel').jcarousel({
        ... // all your parameters
    });
}

If you replace the jCarousel container via AJAX you should do something like this:

if( myCarousel = $("#mycarousel").data('jcarousel') ) {
    myCarousel.stopAuto()
    myCarousel.reset();
}

I hope this helps someone...

schulle7

score 0 · Answer 4 · answered Nov 28 '10 at 23:48

0

I'm assuming you're talking about this plugin: http://sorgalla.com/jcarousel/

What type of error are you getting? I'm guessing it's trying to find elements that aren't visible and failing. It'd seem like you could just bind a function to the tab switching to either hide the carousel or call its reset() method.

answered Nov 28 '10 at 23:48

drewish

9,042
9
38
51

yes thats the JQuery-Plugin i'm meaning. the error is: jCarousel: No width/height set for items. This will cause an infinite loop. Aborting... I cnow the reason why the error is coming but i have to remove the element and also the binding of the plugin to the element. something like $("myelement").remove(jCarousel) ?! – PaDalton Nov 29 '10 at 21:23

jCarousel unload / disable / remove

4 Answers4