Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

    needs some help with a simple img rotater

    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;
    }

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>
    Last edited by bullant; 05-17-2011 at 07:20 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •