Removing an item from jCarousel plug-in

Question

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

$.jcarousel.fn.extend({
    removeAndAnimate: function(index) {

        var itemsHTML = new Array();
        var counter = 0;

        // Me guardo los que quedan
        for(i = 0; i < this.size(); i++)
        {
            if(i != (index - 1))
                itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html();
        }

        // Configuro uno menos y borro todo
        this.size(this.options.size -1);
        this.reset();


        // Vuelvo a cargarlos
        counter = 0;
        for(i = 0; i < itemsHTML.length; i++)
        {
            this.add(counter++, itemsHTML[i]);
        }

        this.reload();
    }
});

USAGE

var carousel = jQuery('#mycarousel').data('jcarousel');
carousel.removeAndAnimate(1);

Answer 2

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 3

My other solution was to add a class to my loaded content and delete all the items that don't have this class in the DOM. Once "removed" by carousel.reset(), these elements lose systematically the added class.

You will be able then to remove the white boxes with:

$("li:not(.the_class)").remove();

Add it just after the carousel.add() function.

It works well and you don't even have to add any function to your carousel.

This is an "easy to go" solution and a click on the prev/next buttons may show a white box. To remove it, apply the same solution on the callback buttonNextCallback / buttonPrevCallback.

Answer 4

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

Answer 5

I combined both of your answers because none worked for me..

I added it at my init custom function

carousel.removeAndAnimate = function(i) {
            var counter = 1;    
            var itemsHTML = new Array();
            var e = this.get(i);
            children = e.parent().find("li");
            $(e).remove()
            $.each(children,function(){
                if(counter != i) {
                    itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
                }
                counter++;
            });
            this.size(this.options.size -1);
            this.reset();
            counter = 1;
            carousel = this;
            $.each(itemsHTML, function(k, v){
                if(v != null) {
                    carousel.add(counter, v[0].innerHTML);
                    counter++;
                }
            });
            this.reload();
        }

It works well..

You can add more improvements like scrolling back to the item's that have just been removed position.