CODEWITHSUNDEEP
javascriptjqueryhtmlcsstimeout
Rachcha
Rachcha

Reputation: 8816

Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

I am trying to build a simple web page for my website using HTML, CSS, JavaScript and JQuery. What I want is to display a slideshow of a few of my images at the top of the page. I just want the pictures to fade out and fade in after one another forever until the user closes the browser. I want each picture to be displayed for a certain amount of time, after which it will fade out and another picture would fade in.

I referred to this as well as this post on SO but couldn't find a solution. I got some idea from this page and tried to develop some code.

The overall layout of the website is as follows:

This is what I want and I am getting, I just want to animate the photograph here

For this, my index.html page looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="css/style.css" />
    <script language="javascript" src="js/jquery-1.10.2.min.js"></script>
    <script language="javascript" src="js/common.js"></script>
    <script language="javascript" src="js/banner_rotator.js"></script>
</head>
<body onload="loadBody();">
<div id="wrapper">
    <img id="headerlogo" />
<div id="nav">
<a href="javascript: void(0);">Home</a>
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Weddings</a>
<a href="javascript: void(0);">Portraiture</a>
<a href="javascript: void(0);">Landscapes</a>
<a href="javascript: void(0);">Products</a>
<a href="javascript: void(0);">Miscellaneous</a>
<a href="javascript: void(0);">Services</a>
<a href="javascript: void(0);">Contact</a>
</div>
    <div id="container">
        <div id="content">
<!-- Main content starts here -->
<p>
Welcome to the world of The Siblings' photography.
</p>
imgpos = <span id="imgposspan"></span>
<!-- Main content ends here -->
        </div>
    </div>
</div>
</body>
</html>

The CSS is like this:

body {
    background-color: transparent; color: #d0d0d0;
    font: normal normal 11px verdana; margin: 0 auto;
}
#wrapper {
    background-color: transparent; width: 960px; margin: 0 auto;
}
#headerlogo {
    border-radius: 0px 0px 5px 5px; display: block;
    width: 960px; height: 350px;
    background-color: #d0d0d0;
}
#container {
    width: 100%; margin-top: -35px;
}
#nav {
    background-color: transparent;
    color: #888888; border-radius: 5px; padding: 10px;
    width: 100%; position: relative; top: -40px;
}
#nav>a {
    border-radius: 5px; display: inline-block; padding: 5px 19px;
    font-weight: bold; border: 1px solid transparent;
    color: #888888; background: none none transparent no-repeat;
}
#nav>a:link {
    text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:visited {
    text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:hover{
    text-decoration: none; border-color: #ffa500; background-image: url("/img/1x30_ffa500.gif");
    background-repeat: repeat-x; box-shadow: 0px 0px 5px #ffd700;
}
#nav>a:active {
    text-decoration: underline; border-color: transparent;
    background-image: none;
}

#content {
    background-color: #f0f0f0; color: #202020;
    padding: 5px; border-radius: 5px;
}

The common.js file is like this:

$(document).ready(function (){
    var images = new Array();
    images[0] = new Image();
    images[0].src = "img/coverpics/sea_link.jpg";
    images[1] = new Image();
    images[1].src = "img/coverpics/marine_drive.jpg";
    images[2] = new Image();
    images[2].src = "img/coverpics/backbay.jpg"
    banner_rotator("headerlogo", images, 0);
});

And, the banner_rotator.js file is like this:

function banner_rotator(imgid, imgarray, imgpos) {
    setInterval(function() {
        if (imgpos >= imgarray.length || imgpos == undefined)
            imgpos = 0;
        $("#"+imgid).attr({ "src" : imgarray[imgpos].src });
        $("#"+imgid).fadeIn(1000, "linear");
        $("#"+imgid).delay(6500);
        $("#"+imgid).fadeOut(500);
        // $("#imgposspan").html(imgpos);
        imgpos++;
    }, 8000);
}

Now, my problem description is as follows:

  1. For the first few seconds the top portion is blank. The image is not showed, even though I am developing and having all the files on my local machine itself.

  2. This first image directly pops up on the screen, instead of fading in.

  3. After this image fades out, the image block vanishes, as if it is set to display: none; for a second. The entire page that follows the image shifts up. Then, the next image fades in and so forth everything runs normal.

Hence, in short, I have problems with the starting of this slideshow. Can anybody please help?

Also please tell me where can I put my code so everybody here can access and see for themselves how it runs?

JSFIDDLE

Upvotes: 3

Views: 1423

Answers (3)

mikakun
mikakun

Reputation: 2265

 <img id="headerlogo" />

Don't do that (an image tag with no src attribute)

Put a div that will hold the space (set position:relative with width & height in css)

Then the problem is that you are changing your src attribute in your time loop, this ain't smooth

In your CSS, suppose you name your slider wrapper headerlogo_wrapper

 div.headerlogo_wrapper > img {position:absolute;display:none;left:0;top:0}

Then you append your images to the space holder you have created (they will not show obviously)

Then you fadeIn your first image then you launch your setInterval :

//after having appended the images to the slider wrapper :

var $img = $("div.headerlogo_wrapper > img");
$img.eq(0).fadeIn(1000, "linear");
var ivisible = 0;


setInterval( function() {
$img.eq(ivisible).fadeOut(500);
++ivisible;
if (ivisible>$img.length-1) ivisible = 0;

$img.eq(ivisible).stop().fadeIn(1000, "linear");

}, 8000);

(If you want an image to be shown during load, some simple changes shall do; also if the first interval start immediately you obviously don't need to fadeIn "manually" the first image)

Upvotes: 1

Manolo
Manolo

Reputation: 26460

The problem is that you are fading out at the end of your interval. So replace this:

    $("#"+imgid).attr({ "src" : imgarray[imgpos].src });
    $("#"+imgid).fadeIn(1000, "linear");
    $("#"+imgid).delay(6500);
    $("#"+imgid).fadeOut(500);

with this:

    $("#"+imgid).fadeOut(500)
    $("#"+imgid).queue(function(){
    $("#"+imgid).attr({ "src" : imgarray[imgpos].src });
    $("#"+imgid).fadeIn(1000);
    $("#imgposspan").html(imgpos);
    imgpos++;
    $(this).dequeue();
    });

JSFIDDLE demo

Upvotes: 1

Chris Hanson
Chris Hanson

Reputation: 731

Try this: http://jsfiddle.net/3XV5M/

Your problem is the first time you run the timer function it won't run straight away. It will be run after 8000ms. The way this fiddle works is it will execute the function immediately and the run itself again after 8 seconds. Note I'm using setTimeout instead of setInterval. 

function banner_rotator(imgid, imgarray, imgpos) {
    if (imgpos >= imgarray.length || imgpos == undefined) imgpos = 0;

    $("#"+imgid).attr({ "src" : imgarray[imgpos].src })
                .fadeIn(1000, "linear")
                .delay(6500)
                .fadeOut(500);

    imgpos++;

    setTimeout(function() {banner_rotator(imgid, imgarray, imgpos) }, 8000);
}

The other problem is you need to hide the images first, so they can fade in. They wont fade in if they are already visible. 

#headerlogo {
    border-radius: 0px 0px 5px 5px;
    width: 960px; height: 350px;
    background-color: #d0d0d0;
    display: none; /* Add this */
}

Then to prevent the other elements jumping up when you fade the images out, wrap the image element inside a div and set it's height. I used a div with a class of banner and added this style:

.banner {
    height: 350px;
}

Hope that helps.

Upvotes: 1

Related Questions