Removing an item from jCarousel plug-in

Question

Hello.

I have a question regarding the jCarousel plug-in (from sorgalla). How do I remove items from it the right way?

You can see how far I've gone here. Try deleting a few items and then scrolling to the right, you'll see an "emtpy scroll" eventually, and that's what I'm trying to get rid of.

I've tried using the remove(); jQuery function instead of changing the css to display: none; but that produces a weird white blank space where the item used to be. If you look at the jquery.jcarousel.js on line 400 you'll see a remove function, but I'm not sure on how to use it.

Any help is much appreciated. Thanks!

Answer 1

You're example makes sense, except since you're stepping outside the bounds of the plugin, jCarousel doesn't know to update itself. From the docs, it seems like the remove() method you mentioned would work. However, it my trials I never could get the jCarousel object to actually "do the right thing" and update it's buttons, scroll around, etc.

Because of all that, I wrote an additional method on the jCarousel class that does exactly that. You call removeAndAnimate(1) to remove the first item in the carousel and rebuild everything so that next/prev buttons are enabled/disabled, the works.

Also worth noting, the remove() function jCarousel provides prevents you from removing an item that is currently being shown, which is exactly what we wanted to do (allow the user to remove an image from the carousel by clicking on it, for example).

The implementation for removeAndAnimate(i):

removeAndAnimate: function(i) {

        var e = this.get(i);

        var d = this.dimension(e);

        if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px');

        e.remove();
        this.options.size--;

        var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null;
        var li = this.list.children('li');
        var self = this;

        if (li.size() > 0) {
            var wh = 0, i = this.options.offset;
            li.each(function() {
                self.format(this, i++);
                wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + 'px');            
        }

        this.scroll(0,true);
        this.buttons();

    }

I recommend placing this directly after the remove() implementation. To access the jCarousel instance itself with jQuery, outside of the callback functions:

var carousel = $("#mycarousel").data("jcarousel");
carousel.removeAndAnimate(1);

That should work!

Answer 2

I found where the problem with white boxes comes from. JCarousel method format() doesn't replace class names, but just add new one. I've rewrote this function and it works well for me:

format: function(e, i) {
        // remove all class names matches 'jcarousel-item' at the start
        $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, '');
        // add new class names  
        var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({
            'float': 'left',
            'list-style': 'none'
        });
        $e.attr('jcarouselindex', i);
        return $e;
}