Question

I have created an rotating image banner module for an in house CMS. I did not write all the jquery for this and that’s why I’m a little confused.

Basically the problem is the first image displayed in the banner after a page reload does not fade out like the rest of the images do. I understand that this probably because it is the default image loaded and is not part of the loop that’s causing the image banner to rotate. The banner can be seen here: http://www.easyspacedesign.com/craig/dentalwise/

Notice how the first image after a reload sort just jumps to the next image but then all he images afterwards smoothly fade in and out.

How do I grab that first image after a reload and make it fadeout like rest?

here is the code:

<script type="text/javascript">
<!--

var doLooop = true;

$(document).ready(function(){
setInterval("loop()",5000);
});

function loop(){
if(!doLooop){ return; }
var $total = parseInt($("input[name=total_slides]").val());
var $id = parseInt($("a._active").attr("rel"));
var $new = $id+1;
if($new>$total){$new=1;}
changeSlide($new);
}

function changeSlide($id){
// Prepare selectors
var $total = $("input[name=total_slides]").val();
var $txtSlt = "#_slideText_"+$id;
var $imgSlt = "#_slideImg_"+$id;
var $active = $("a._active").attr("id");
var $new_img_href = "#animation_selectors a:nth-child("+$id+") img";
var $new_active = "#animation_selectors a:nth-child("+$id+")";
// Hide active images and text    
$(".slideImg").css("display","none");
$(".slideTxt").css("display","none");
// Display selected images and text 
$($txtSlt).fadeIn(1200);
$($imgSlt).fadeIn(1200);
$($txtSlt).delay(2500).fadeOut(1200);
$($imgSlt).delay(2500).fadeOut(1200);   
// Update active anchor image
$("a._active img").attr("src","<?php echo ROOT; ?>Images/StyleImages/off.png");
$("a._active").removeClass("_active");
$($new_img_href).attr("src","<?php echo ROOT; ?>Images/StyleImages/on.png");
$($new_active).addClass("_active");
}

$(function(){
$("#animation_selectors a").click(function(e){
          e.preventDefault();                                  
    var $id = $(this).attr("rel");
    doLooop = false;
    changeSlide($id);
});
});

-->
 </script>
<div id="animation">

<div id="animation_slides">
    <?php
    $img_sql = "SELECT strImageUrl FROM tbl_mod_Animation ORDER BY intAnimationID";
    if($img = $db->get_results($img_sql)){ $i=1;
        foreach($img as $img){ 
            if($i!=1){ $display = " style=\"display:none;\""; } else { $display  = ""; }
            echo "<div id=\"_slideImg_$i\" class=\"slideImg\" $display><img   src=\"".ROOT."Images/Uploads/Slides/".$img->strImageUrl."\" alt=\"\"  /></div>"; 
            $i++;
        }
    }
    ?>
</div>
<div id="animation_text">
    <?php
    $text_sql = "SELECT strText FROM tbl_mod_Animation ORDER BY intAnimationID";
    if($text = $db->get_results($text_sql)){ $i=1;
        foreach($text as $text){ 
        if($i!=1){ $display = " style=\"display:none;\""; } else { $display = ""; }
        echo "<div id=\"_slideText_$i\" class=\"slideTxt\" $display>".$text->strText."</div>"; 
        $i++;
        }
    }

    ?>
</div>

<div id="animation_selectors">
    <?php
    for($x=1;$x<$i;$x++){
        if($x==1){ 
            ?><a  id="slide_opt<?php echo $x; ?>" href="#" rel="<?php echo $x; ?>" class="_active"><img class="slideOpt" src="<?php echo ROOT; ?>Images/StyleImages/on.png" alt="" /></a><?php 
            } else {
            ?><a  id="slide_opt<?php echo $x; ?>" href="#" rel="<?php echo $x; ?>"><img class="slideOpt" src="<?php echo ROOT; ?>Images/StyleImages/off.png" alt="" /></a><?php 
            }
        }
    echo "<input type=\"hidden\" name=\"total_slides\" value=\"".($i-1)."\" />";

    ?>
</div>

</div><!--end of animation-->
<?php

?>

Answer 1

changeSlide() sets up each slide to fade in and then fade out in 2.5 seconds. loop() calls changeSlide() every 5 seconds and passes the id of the next slide to be shown. The problem is that the first slide isn’t set up the same way on page reload. It’s probably just statically written on the page with the _active class.

You’d be better off, instead of setting a delay to fade each slide out after 2.5 seconds, to pass in both the previous and next slide to the changeSlide function and then fade out the previous and fade in the next.

function loop() {
    ... 
    changeSlide($id, $new);
}

and then in changeSlide:

function changeSlide($prev, $next) { 
     ...
     var $prevTxtSlt = "#_slideText_" + $prev;
     var $prevImgSlt = "#_slideImg_" + $prev;
     var $nextTxtSlt = "#_slideText_" + $prev;
     var $nextImgSlt = "#_slideImg_" + $prev;
     ...
     $($prevTxtSlt).fadeOut(1200);
     $($prevImgSlt).fadeOut(1200);
     $($nextTxtSlt).fadeIn(1200);
     $($nextImgSlt).fadeIn(1200);
}