jQuery needs some help with a simple img rotater

DanInMa · 05-17-2011, 03:46 AM

hey guys n gals. basically, I have 2 img elements, and I am trying to do a few things in this order, but my animation does not look the way I want and I seemed to have messed up reading from the img array I am using because I am also skip[ping an image ( cant put this into words but youll see when you look at the code in action)

My goal is to make it look as if the lower, hidden image is pushing the current image up and off the screen, in a timed loop, but I have only succeeded in sliding the images up individually instead, I could use some advice on this one, it's driving me nuts:

live site: http://dansplace.zzl.org/

jq code:

Code:

var curr = -1;
var headimg = ['Boston_Skyline_Panorama_Dusk-smaller.jpg','b_diamonds.jpg','ocean.jpg'];
var base_url = "/images/"
var total_imgs = 2
function refresh2() {
if(curr >= total_imgs){
curr =0;
}else{
curr++}

$("#header img").eq(1).attr("src",base_url+headimg[curr]+"?" + Math.random());
$("#header img").eq(1).css({top:100})
if(curr >= total_imgs){
curr =0;
}else{
curr++}
$("#header img").eq(0).animate({top:-100})
$("#header img").eq(0).attr("src",base_url+headimg[curr]+"?" + Math.random());


$("#header img").eq(1).animate({top:0}).delay(100)
$("#header img").eq(0).insertAfter($("#header img").eq(1))

}

involved markup:

Code:

 
<div id="header">"
 <img src="/images/ocean.jpg" id="headimg0">
 <img src="" id="headimg1">  
     <ul class="headerUL">
           <li class=\"current\"><a href=\"/\">Home</a></li>
           <li><a href=\"/resume.php\">Resume</a></li>
           <li><a href=\"/blog.php\">Future Blog</a></li>
           <li><a href=\"/about.php\">About Me</a></li>
           <li><a href=\"/contact.php\">Contact</a></li>
   </ul>
</div>

involved css:

Code:

#headimg0 {
	height: 100px;
	width: 960px;
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 1;
}
#headimg1 {
	height: 100px;
	width: 960px;
	position: relative;
	left: 0px;
	top: 100px;
	z-index: 1;
}

bullant · 05-17-2011, 05:26 AM

Maybe use this non jquery demo as a guide.

You can put as many images as you like in the picPaths array and their <img> elements will be created dynamically.

After each <img> has moved up off the container, it is removed and appended to the bottom of the pile of images in the container. The loop then continues with the next image moving up.

The only stipulation is that all the images must be the same height and width for a smooth animation.

Hopefully I'll have time later to tweak the demo to allow variable height images.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #banner {
                display: none;
                position: relative;
                border: 3px solid black;
                overflow: hidden;
            }
            #imgContainer {
                position: absolute;
                top: 0px;
                left: 0px;
            }
            #imgContainer img{
                margin: 0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                display: block;
            }
        </style>
        <script type="text/javascript">
            var picPaths = ['num1.jpg','num2.jpg','num3.jpg'];
            var step = 5;  //pixels
            var speed = 50; //milliseconds
            var slidePause = 3000; //milliseconds between image slides
            var curPos = 0;
            var timer;
            function slideImages(){
                curPos -= step;
                if(curPos < -picHeight){ //finished moving up 1 image
                    clearTimeout(timer);
                    curPos = 0;
                    reOrderImgs();
                    imgContainerO.style.top = curPos +'px';
                } else { //continue sliding up
                    imgContainerO.style.top = curPos +'px';
                    timer = setTimeout(slideImages,speed);
                }
            }
            function reOrderImgs(){
                imgContainerO.appendChild(imgContainerO.removeChild(imgContainerO.childNodes[0]));
                setTimeout(slideImages,slidePause);
            }
            window.onload=function(){
                preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
                //preload the images
                var picsO = new Array();
                for(i=0; i < preloadedImgs.length; i++){
                    picsO[i] = new Image();
                    picsO[i].src = preloadedImgs[i].src;
                }
                picHeight = picsO[0].height;
                bannerO = document.getElementById('banner');
                imgContainerO = document.getElementById('imgContainer');
                for(i=0; i < picsO.length; i++){
                    var newImg = document.createElement('img');
                    newImg.setAttribute('src',picsO[i].src);
                    imgContainerO.appendChild(newImg);
                }
                bannerO.style.height = picHeight+'px';
                bannerO.style.width = picsO[0].width+'px';
                bannerO.style.display = 'block';
                document.body.removeChild(document.getElementById('preloadedPics'));
                setTimeout(slideImages,500);
            }
        </script>
    </head>
    <body>
        <!-- preload the images so we can use their actual width and height property
             to scale the thumbnails -->
        <div id="preloadedPics" style="display: none"></div>
        <script type="text/javascript">
            for(i=0; i < picPaths.length; i++){
                var newImg = document.createElement('img');
                newImg.src = picPaths[i];
                document.getElementById('preloadedPics').appendChild(newImg);
            }
        </script>
        <!-- --------------------End of image preloads ------------------ -->
        <div id="banner">
            <div id="imgContainer"></div>
        </div>
    </body>
</html>