Advanced Imageslider need help for optimization!

Advanced Imageslider need help for optimization!

Hi Folks!
I’m trying to make an image slider, I know there are dozens of theme out there but I couldn’t find the right one so I decided to make my own. My example is based on the tutorial of Jon Raasch. I have extended the script to meet my needs and I succeeded to get what I want but… I’m a newbie regarding to jQuery so my solution is very dirty and buggy that’s why I’m posting here to find anyone who could help me to optimize this script. First I will explain what I’ve trying to do:

  • Fully customizable captions (HTML support with valid XHTML).
  • Variable positions of the captions (left, right, top, bottom). I use the <var> tag to get an extra class where I define the positions (see my example).
  • Animated slide in and slide out effect for the captions with a configurable delay.

Bugs and disadvantages:

  • The first image won’t show the transparent background
  • Sometimes the timing is messed up and the captions won’t show how they should

Here is what I’ve done till now http://www.3d-mag.net/test/slideshow/

and here is my CSS
  1. var {font-style:normal}

  2. #slideshow {position:relative; height:455px}

  3. #slideshow DIV {position:absolute; top:0; left:0; z-index:8; opacity:0.0; height: 455px; background-color: #FFF}

  4. #slideshow DIV.active {z-index:10; opacity:1.0}

  5. #slideshow DIV.last-active {z-index:9}

  6. #slideshow DIV IMG {height: 405px; display: block; border: 0; margin-bottom: 10px}

    #slideshow DIV.active VAR{z-index:20; opacity:1.0}



  7. #slideshow VAR{opacity:0.0; z-index:18}

    #slideshow VAR{display:block}



  8. #slideshow VAR.left{display:none; position:relative;float:left; margin-top:-415px; width:200px; height:0px; background-image:url(trans_bg.png); padding:5px; color:#FFF; z-index:50; text-align:left}

  9. #slideshow VAR.right{display:none; position:relative;float:right; margin-top:-415px; width:200px; height:0px; background-image:url(trans_bg.png); padding:5px; color:#FFF; z-index:50; text-align:left}

  10. #slideshow VAR.top{display:none; position:relative; float:left; margin-top:-415px; width:0px; height:70px; background-image:url(trans_bg.png); padding:5px; color:#FFF; z-index:50; text-align:left}

  11. #slideshow VAR.bottom{display:none; position:relative; float:right; margin-top:-90px; width:0px; height:70px; background-image:url(trans_bg.png); padding:5px; color:#FFF; z-index:50; text-align:left}
and her the jQuery code:
  1. function slideSwitch() {
        var $active = $('#slideshow DIV.active');

        if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

        var $next =  $active.next().length ? $active.next()
            : $('#slideshow DIV:first');
     
        $active.addClass('last-active');
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $('#slideshow VAR.top').delay(0).animate({opacity:'1',width:'854'},500, function(){
                    $('#slideshow VAR.top').delay(6000).animate({opacity:'0',width:'0'},500,function(){   
                    });
                    $('#slideshow VAR.bottom').delay(0).animate({opacity:'1',width:'854'},500, function(){
                        $('#slideshow VAR.bottom').delay(6000).animate({opacity:'0',width:'0'},500,function(){
                        });
                        $('#slideshow VAR.left').delay(0).animate({opacity:'1',height:'395'},500, function(){
                            $('#slideshow VAR.left').delay(6000).animate({opacity:'0',height:'0'},500,function(){       
                            });
                            $('#slideshow VAR.right').delay(0).animate({opacity:'1',height:'395'},500, function(){
                                $('#slideshow VAR.right').delay(6000).animate({opacity:'0',height:'0'},500,function(){
                                });
                            });
                        });
                    });
                });
                $active.removeClass('active last-active');
            });
    }

    $(function() {
        var playSlideshow =  setInterval( "slideSwitch()", 10000 );

        $('#slideshow').hover(function() {
            clearInterval(playSlideshow);
        },
        function() {
               playSlideshow =  setInterval( "slideSwitch()", 10000 );
        });
    });








































I'll be glad about any suggestion! THX in advance!












    • Topic Participants

    • rix