crossfade script, problem with z-index

[Violet_82]

Hi all, I wonder if you can help me at all, as I run into an annoying problem. I created an automated crossfade but when I click on the controller I want it to change into a manual one, but unfortunately the manual one doesn't work as expected. You can see it in action here: http://antobbo.webspace.virginmedia.com/future/home.html If you let it run, it will work but if you try to use the manual controllers you'll see that eventually the crossfade is not smooth and it doesn't crossfade properly. The problem, I believe is a z-index, as in the images don't get the right z-index at the right time.
Let's look at the code. Here are he relevant bits:
HTML:
<div class="pseudoPage home">

    <div class="carouselImages">
        <div class="imageWrapper">                       
            <div class="slide active">
                <img src="images/hugeImage1.png" alt="">
                    <div class="message">
                        <div class="msgWrap">
                            <div class="title">
                                <span>Lorem ipsum</span>
                            </div>
                            <div class="text">
                                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</span>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="slide">
                <img src="images/hugeImage2.png" alt="">
                <div class="message">
                    <div class="msgWrap">
                        <div class="title">
                            <span>Interactive</span>
                        </div>
                        <div class="text">
                            <span>We all love interactive sites</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slide">
                <img src="images/hugeImage3.png" alt="">
                <div class="message">
                    <div class="msgWrap">
                        <div class="title">
                            <span>Crossbrowser</span>
                        </div>
                        <div class="text">
                            <span>All our websites are tested across all major browsers</span>
                        </div>
                    </div>
                </div>
            </div>                           
        </div>                   
        <div class="controllers">

        </div>
    </div>
</div>

The controllers are added dynamically, depending on how many images you have. As said the automatic crossfade works OK, and here is the portion of the script for the manual one:

$(".controllers a.indicator").click(function(){//when a controller is clicked
    clearInterval(timer);//stop the carousel
    var $this = $(this);
    if(!(($this).hasClass("active"))){
        $(".controllers a.indicator").removeClass("active");
        $this.addClass("active");
        $("a.indicator").each(function(index){//go thru each controller
            if($(this).hasClass("active")){//if it has active class
                activeIndex = index;
                updateCarousel(index);
                //$(".imageWrapper > div").removeClass("active").css("z-index",1).eq(activeIndex).addClass("active").css("z-index",3);//get the equivalent controller and give it an active class
            }
        });
    }
});


function updateCarousel(currentIndex){
    $(".imageWrapper > div").each(function(){
        if(($(this).css("z-index")) == 2){
            //console.log("true");
            $(this).css("z-index",1);
        }
    });
    $(".imageWrapper > div.active").fadeOut(2000, function(){
        $(this).css("z-index",2).removeClass("active").show();
        $(".imageWrapper > div").eq(currentIndex).css("z-index",3).addClass("active");
        /* $(".imageWrapper > div").each(function(){
            if(($(this).css("z-index")) == 2){
                console.log("treu");
                $(this).css("z-index",1);
            }
        }); */
        //$(".imageWrapper > div[z-index='2']").css("z-index",1);
    });
    //$(".imageWrapper > div").removeClass("active").css("z-index",1).eq(currentIndex).addClass("active").css("z-index",3);
    //$(".imageWrapper > div").removeClass("active").css("z-index",1).eq(activeIndex).addClass("active").css("z-index",3);

}

So, the idea is that when a controller is clicked the automatic carousel stops. The clicked controller gets a class of active and then problems start. What I think I need to do is to:
-get the active slide, fade it out, remove the active class from it, drop the z-index to 2 (the active class has a z-index of 3, the next image gets 2 and the other ones 1), then the image corresponding to the controller clicked gets the z-index changed to 3, and a class of active added, but I think something's missing, as the logic doesn't work, ANy idea?

This is instead the portion that gets the automatic carousel to work:

function startCarousel(){
    console.log("startCarousel() run");
    var $activeSlide = $(".imageWrapper div.active");//grab active slide
    var $nextSlide = ($activeSlide.next().length > 0) ? $activeSlide.next() : $(".imageWrapper div:first");
    $nextSlide.css("z-index",2);//move next image up
    $activeSlide.fadeOut(1550,function(){//fade out first image
        $activeSlide.css("z-index",1).show().removeClass("active");//reset z-index, reverse the fadeOut with next       
        $nextSlide.css("z-index",3).addClass("active");//move image to the top
        updateController();//update the controller
    });
}

thanks

[Violet_82]

OK, done some work, got rid of a lot of unnecessary code and changed the image when the controller is clicked on - the only thing is that I got rid of the animation in the manual carousel, here is the function that does it all:

(document).ready(function(){
    //console.log("ohi");
    init();//initialize carousel
    resizeCarousel();
    var timer = setInterval('startCarousel()', 3000);
    $(".controllers a.indicator").click(function(){//when a controller is clicked
        $(".imageWrapper div").css("z-index",1);//index of all div to 1
        clearInterval(timer);//stop the carousel
        $(".controllers a.indicator.active").removeClass("active");//remove active from all of controllers

        /* $(".imageWrapper div.active").fadeOut(1550,function(){//fade out first image
            $(this).show().removeClass("active");//reset z-index, reverse the fadeOut with next     
            $nextSlide.css("z-index",3).addClass("active");//move image to the top
            updateController();//update the controller
        }); */


        $(".imageWrapper div.active").removeClass("active").css("z-index",2);//remove active from the div
        $(this).addClass("active");

        $("a.indicator").each(function(index){//go thru each controller
            var $this = $(this);

            if($this.hasClass("active")){//if it has active class               
                //updateCarousel(index);
                $(".imageWrapper > div").eq(index).addClass("active").css("z-index",3);//get the equivalent controller and give it an active class
            }
        });

    });

As you can see the fadeing out is commented out, because I just can't get it to work. This is what the new code does:

click on controller
    stop the carousel etc
    drop  index of all divs (slides) to 1
    remove active class from currently active controller
    remove active class from currently active slide and drop its index to 2
    add active class to clicked controller
    run thru all controllers
        find the active one and assign active class to the corresponding slide and increase its z-index to 3

I'm not sure how the fadingOut will fit in here

[Violet_82]

OK, after going through the code over and over again, I found the solution. Basically I had to have a "transitional" z-index of 2, and it all works.