Turn JQuery cycle z-indexs in negative values

Question

Jquery cycle works with z-index and opacity to update the current image

z-indexes are: 1,2,3,4,...

and i need -1,-2,-3,-4,-5,... (negative)

This is the only piece of code ive seen here http://toniweb.us/gm/js/cycle.js related with z-index

$.fn.cycle.transitions = {
    fade: function($cont, $slides, opts) {
        $slides.not(':eq(0)').hide();
        opts.cssBefore = { opacity: 0, display: 'block' };
        opts.cssAfter  = { display: 'none' };
        opts.animOut = { opacity: 0 };
        opts.animIn = { opacity: 1 };
    },
    fadeout: function($cont, $slides, opts) {
        opts.before.push(function(curr,next,opts,fwd) {
            $(curr).css('zIndex',opts.slideCount + (fwd === true ? 1 : 0));
            $(next).css('zIndex',opts.slideCount + (fwd === true ? 0 : 1));
        });
        $slides.not(':eq(0)').hide();
        opts.cssBefore = { opacity: 1, display: 'block', zIndex: 1 };
        opts.cssAfter  = { display: 'none', zIndex: 0 };
        opts.animOut = { opacity: 0 };
    }
};

i tried to change the + by - but it seems to keep working the same way..

$.fn.cycle.transitions = {
    fade: function($cont, $slides, opts) {
        $slides.not(':eq(0)').hide();
        opts.cssBefore = { opacity: 0, display: 'block' };
        opts.cssAfter  = { display: 'none' };
        opts.animOut = { opacity: 0 };
        opts.animIn = { opacity: 1 };
    },
    fadeout: function($cont, $slides, opts) {
        opts.before.push(function(curr,next,opts,fwd) {
            $(curr).css('zIndex',opts.slideCount - (fwd === true ? 1 : 0));
            $(next).css('zIndex',opts.slideCount - (fwd === true ? 0 : 1));
        });
        $slides.not(':eq(0)').hide();
        opts.cssBefore = { opacity: 1, display: 'block', zIndex: -1 };
        opts.cssAfter  = { display: 'none', zIndex: 0 };
        opts.animOut = { opacity: 0 };
    }
};

any idea how?

btw

$(curr).css('zIndex',opts.slideCount - (fwd === true ? 1 : 0));

this means opts.slideCount-1 if fwd==true and opts.slideCount+1 if false, right?

Answer 1

Try changing it to:

$(curr).css('zIndex', '-' + (opts.slideCount + (fwd === true ? 1 : 0)));
$(next).css('zIndex', '-' + (opts.slideCount + (fwd === true ? 0 : 1)));