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 9 of 9
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How can I add a pause to this ?

    Hi,

    I found a nice simple javascript slider but there is a small
    change I want to make.

    How can I make the slider pause for one or two seconds
    when the image has slid fully into position ?

    PHP Code:
    <style>
    #ParentDiv
    {
        
    marginauto;
        
    width200px;
        
    overflowhidden;
    }

    #ChildDiv
    {
        
    width6000px
        
    position:relative;
        
    cursor:pointer;
    }
    #ParentDiv img
    {
    floatleft;
    padding3px;
    margin0px;
    }
    </
    style>

    <
    script type="text/javascript">
    //Array Of Image, [URL, width of Image, LinkTo]
    var t;
    var 
    StepTime=20;
    var 
    StepPixel=2;
    var 
    ImgPadding=3;
    var 
    ParentDivLen=200;
    var 
    Img= Array(
    [
    "http://mobi6.net/images/screen1.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen2.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen3.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen1.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen2.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen3.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen1.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen2.png"200"index.php"], 
    [
    "http://mobi6.net/images/screen3.png"200"index.php"]
    );
    var 
    Pos=3;
    var 
    Len=Img.length;

    var 
    DivWidth=0;
    var 
    MoreImage=0

    function 
    goURL(URLS) {
        
    document.location.href=URLS;
    }
    for(
    i=0;i<Len;i++)
    {
        
    DivWidth+=Img[i][1] + ImgPadding*2;
        if(
    MoreImage==&& DivWidth>ParentDivLen)MoreImage=i;
    }
    function 
    getE(id)
    {
        return 
    document.getElementById(id);
    }

    function 
    Dr_Img(IMG)
    {
        return 
    '<img src="'IMG[0] + '" onclick="goURL(\'' IMG[2] + '\')">';
    }

    function 
    Dr_ImgArr()
    {
        var 
    str='';
        for(
    i=0;i<Len;i++) str += Dr_Img(Img[i]);
        for(
    i=0;i<MoreImage;i++)str += Dr_Img(Img[i]);
        
    document.write(str);
    }

    function 
    DoSlide()
    {
        if(
    Pos==0)Pos=-1;
        
    divtg=getE('ChildDiv');
        
    Pos-=StepPixel;
        if(
    Pos<-DivWidth)Pos=0;
        
    divtg.style.left=Pos +'px';
        
    t=setTimeout('DoSlide()',StepTime);
        
    }

    function 
    SlideStop()
    {
        
    clearTimeout(t);
    }
    function 
    setmouse(id)
    {
        if(
    id==1)
        {
            
    DoSlide();
        }
        else
        {
            
    SlideStop();
        }
    }
    </script>

    </head>
    <body onload="DoSlide()">
    <div id="ParentDiv">
        <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">

            <script>
                Dr_ImgArr();
            </script>
        </div>
    </div> 
    I have tried adding wait(2) in a couple of places but
    the script just failed to run.

    Any ideas ?


    Thanks.



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    You are doing this the hard way by writing an <img> for each image. It is easier to have just 1 <img> and change the src for the img. This way, when an image has completed sliding off you can use setTimeout to pause the next image before it begins to slide off.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Excepting that you would then want to preload the images, else the first time through there could be a substantial wait until the next image is fully loaded.

    Excepting also that what he wants to do is slide a new image into position as the old one is sliding off. That is he wants a continuous image strip. So he would need minimum of at least 2 adjacent images.

    And if the images aren't the same width, you could need more than that. Say the first image is 800 pixels wide but the next 4 are each only 200 pixels wide. So now you need 5 adjacent images, as it will take all 4 of the images 2 through 5 to slide in place of the first 800 pixel image.

    You can use a 2 image slider if all images are the same width, but not otherwise.

    His slider *is* the simplest kind when images are different widths.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    This is the way I have done it in the past. You can use it if it's any help to you
    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: inline;
                }
            </style>
            <script type="text/javascript">
                var picPaths = ['num1.jpg','num2.jpg','num3.jpg'];
                var step = 5;  //pixels
                var speed = 50; //milliseconds
                var slidePause = 2000; //milliseconds
                var curPos = 0;
                var timer;
                function slideImages(){
                    curPos -= step;
                    if(curPos < -picWidth){ //finished moving up 1 image
                        clearTimeout(timer);
                        reOrderImgs();
                        imgContainerO.style.left = curPos +'px';
                    } else { //continue sliding up
                        imgContainerO.style.left = curPos +'px';
                        timer = setTimeout(slideImages,speed);
                    }
                }
                function reOrderImgs(){
                    var childElems = imgContainerO.childNodes; //first child is a text node
                    for(i=0; i < childElems.length; i++){
                        if(childElems[i].nodeName.toLowerCase() == 'img'){
                            var firstImgO = childElems[i];
                            i = childElems.length;
                        }
                    }
                    imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
                    curPos = 0;
                    setTimeout(slideImages,slidePause);
                }
                window.onload=function(){
                    preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
                    //preload the images
                    picsO = new Array();
                    for(i=0; i < preloadedImgs.length; i++){
                        picsO[i] = new Image();
                        picsO[i].src = preloadedImgs[i].src;
                    }
                    picWidth = picsO[0].width;
                    picHeight = picsO[0].height;
                    bannerO = document.getElementById('banner');
                    imgContainerO = document.getElementById('imgContainer');
                    imgContainerO.style.width = picWidth*picsO.length+'px';
                    for(i=0; i < picsO.length; i++){
                        var newImg = document.createElement('img');
                        newImg.id = 'img_'+(i+1);
                        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 Mishu; 03-25-2012 at 12:54 AM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Mishu View Post
    This is the way I have done it in the past. You can use it if it's any help to you
    Wow! That is the same code posted by bullant (banned) at
    http://www.codingforums.com/showthread.php?t=227071

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks for all your response.

    My images are all the same size.

    I'll try the code suggested
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Quote Originally Posted by Philip M View Post
    Wow! That is the same code posted by bullant (banned) at
    http://www.codingforums.com/showthread.php?t=227071
    LOL! Man, are you ever the detective, Philip!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Philip M View Post
    Wow! That is the same code posted by bullant (banned) at
    http://www.codingforums.com/showthread.php?t=227071
    I actually copied it from sitepoint ages ago. You'll find the same code on webdeveloper.com

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Old Pedant View Post
    LOL! Man, are you ever the detective, Philip!
    Notice the evasive response! He is not prepared to deny that he is in fact bullant/webdev1958. If it talks like bullant, acts like bullant and smells like bullant, then it is bullant! Hopefully the mods will come out of their coma and chuck out this latest incarnation of the troll as well.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    LinkBacks (?)


    Posting Permissions

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