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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow code help

    I found the code for how to create a basic slideshow on javascript kit. It tells you the code for 3 images. I am adding more images to my slide show, but when I go to preview it, it loops through the first 3 pictures only. Is there something else I need to change in order to get it to loop through all my pictures?

    Here is the code I got from the site:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="firstcar.gif"
    var image2=new Image()
    image2.src="secondcar"
    var image3=new Image()
    image3.src="thirdcar.gif"
    //-->
    </script>
    </head>
    <body>
    <img src="firstcar.gif" name="slide" width="100" height="56" />
    <script>
    <!--
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
    </script>
    </body>
    </html>

    My code looks like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    <!--
    var image1=new Image()
    image1.src="Model01.jpg"
    var image2=new Image()
    image2.src="Model02.jpg"
    var image3=new Image()
    image3.src="Model03.jpg"
    var image4=new Image()
    image4.src="Model04.jpg"
    var image5=new Image()
    image5.src="Model05.jpg"
    var image6=new Image()
    image6.src="Model06.jpg"
    var image7=new Image()
    image7.src="Model07.jpg"
    var image8=new Image()
    image8.src="Model08.jpg"
    var image9=new Image()
    image9.src="Model09.jpg"
    var image10=new Image()
    image10.src="Model10.jpg"
    var image11=new Image()
    image11.src="Model11.jpg"
    var image12=new Image()
    image12.src="Model12.jpg"
    var image13=new Image()
    image13.src="Model13.jpg"
    var image14=new Image()
    image14.src="Model14.jpg"
    var image15=new Image()
    image15.src="Model15.jpg"
    var image16=new Image()
    image16.src="Model16.jpg"
    var image17=new Image()
    image17.src="Model17.jpg"
    var image18=new Image()
    image18.src="Model18.jpg"
    var image19=new Image()
    image19.src="Model19.jpg"
    var image20=new Image()
    image20.src="Model20.jpg"
    //-->
    </script>

    <title>Untitled Document</title>
    </head>

    <body>
    <img src="file:///K|/Michaels Homes Web/Images/Model01.jpg" name="slide" width=500 height=375>
    <script type="text/javascript">
    <!--
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    //call function "slideit()" every 3.0 seconds
    setTimeout("slideit()",3000)
    }
    slideit()
    //-->
    </script>
    </body>
    </html>

    This is just the code for the slideshow, not any of the code from the rest of my website. It does the same thing when I test it either the code only or the whole webpage.

    If I am missing something in the steps, please let me know.
    Thanks

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,267
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Quote Originally Posted by chris10mllr View Post
    if (step<3)
    Try changing that to 20.

    Dave

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried that already, but when I went to preview it, it stops at 3 all together instead of looping. I am using Dreamweaver if that helps or makes a difference.
    Last edited by chris10mllr; 07-18-2011 at 07:26 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,267
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I don't see how it would do that. Do you have the site online somewhere so we can see it without having to build it ourselves?
    Dave

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide.

    You can have as many slideshows on a page as you like.

    bannerPics contains the images for each slideshow. The demo is set up for 2 slideshows containing 3 and 6 images. The 2nd slide show has optional back/next/ stop/play buttons turned on.

    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>
            <title></title>
            <style type="text/css">
                .ssCtlBtn {
                    width: 50px;
                    padding: 3px 0px 3px 0px;
                }
                .ssCntlBtnsContainer {
                    width: 150px;
                    padding: 0px 0px 0px 0px;
                    margin: 0px auto 0px auto;
                }
                .ssCaption {
                    text-align: center;
                }
                img {
                    filter:alpha(opacity=100);
                    opacity: 1;
                }
            </style>
            <script type="text/javascript">
                var bannerPics = [
                    [
                        ['num1.jpg','caption 1'],
                        ['num2.jpg','caption 2'],
                        ['num3.jpg','caption 3']
                    ],
                    [
                        ['num4.jpg','caption 4'],
                        ['num5.jpg','caption 5'],
                        ['num6.jpg','caption 6'],
                        ['num7.jpg','caption 7'],
                        ['num8.jpg','caption 8'],
                        ['num9.jpg','caption 9']
                    ]
                ];
                function fade(obj){
                    if(obj.fadeTimerImg){clearInterval(obj.fadeTimerImg);}
                    obj.fadeTimerImg = setInterval(function(){setOpacity(obj);},obj.speed);
                }
                function setOpacity(obj) {
                    obj.curOpac = obj.curOpac + (obj.opacStep * obj.dirn);
                    if(obj.curOpac < 0){
                        obj = swapImage(obj);
                        obj.curOpac = 0;
                        obj.dirn = 1;
                        fade(obj);
                        return;
                    }
                    if(obj.curOpac > 10){
                        obj.curOpac = 10;
                        clearInterval(obj.fadeTimerImg);
                        obj.dirn = -1;
                        obj.newImageTimer = setTimeout(function(){fade(obj);},obj.lagTime);
                        return;
                    }
                    if(typeof(obj.style.opacity) == 'string'){
                        obj.style.opacity = obj.curOpac/10;
                    } else {
                        obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
                    }
                }
                function swapImage(obj){
                    obj.curPic += obj.slideDir;
                    if(obj.curPic > obj.pics.length-1){obj.curPic = 0;}
                    if(obj.curPic < 0){obj.curPic = obj.pics.length-1;}
                    //resize the img element
                    var newDims = calcNewDimensions(obj.pics[obj.curPic][0].width,obj.pics[obj.curPic][0].height,obj.maxWidth,obj.maxHeight);
                    obj.width = newDims['width'];
                    obj.height = newDims['height'];
                    obj.src = obj.pics[obj.curPic][0].src; //swap the image
                    document.getElementById('cap'+obj.capNum).innerHTML = obj.pics[obj.curPic][1]; //swap caption
                    return obj;
                }
                function calcNewDimensions(width, height, maxWidth, maxHeight){
                    newDims = new Array();
                    var xRatio = maxWidth / width;
                    var yRatio = maxHeight / height;
                    //calculate the new width and height
                    if(width <= maxWidth && height <= maxHeight)  {    //image does not need resizing
                        newDims["width"]     = width;
                        newDims["height"]     = height;
                    } else if(xRatio * height < maxHeight) {
                        newDims["height"] = Math.round(xRatio * height);
                        newDims["width"]  = maxWidth;
                    } else {
                        newDims["width"]  = Math.round(yRatio * width);
                        newDims["height"] = maxHeight;
                    }
                    return newDims;
                }
                var captionNum = 0;
                function SlideShowObj(elem, picsA){
                    this.elem = elem;
                    this.elem.pics = picsA;      //preloaded pics array
                    this.elem.maxWidth = 100;
                    this.elem.maxHeight = 100;
                    this.elem.lagTime = 2000;    //milliseconds lag between image swaps
                    this.elem.speed = 50;        //milliseconds speed of fading
                    this.elem.opacStep = 0.5;    //increment of opacity change
                    this.elem.fadeTimerImg;
                    this.elem.newImageTimer;
                    this.elem.curOpac = 10;      //original image opacity: 10=opaque
                    this.elem.curPic = 0;
                    this.elem.dirn = -1;         //direction of fading:  1=fading in, -1=fading out
                    this.elem.slideDir = 1;       //direction of slide show: 1=right, -1=left
                    this.elem.showControls = true;
                    this.elem.playing = false;
                    this.elem.capNum = captionNum++;
                    this.elem.src = this.elem.pics[this.elem.curPic][0].src;
                    this.init=function(){
                        var selfO = this;
                        var newDims = calcNewDimensions(this.elem.pics[this.elem.curPic][0].width,this.elem.pics[this.elem.curPic][0].height,selfO.elem.maxWidth,selfO.elem.maxHeight);
                        selfO.elem.width = newDims['width'];
                        selfO.elem.height = newDims['height'];
                        selfO.elem.src = this.elem.src;
                        if(typeof(selfO.elem.style.opacity) == 'string'){
                            selfO.elem.style.opacity = selfO.elem.curOpac/10;
                        } else {
                            selfO.elem.style.filter = 'alpha(opacity=' + selfO.elem.curOpac*10 + ')';
                        }
                        //create the captions container
                        var oSlideShowContainer = selfO.elem.parentNode.parentNode;
                        oSlideShowContainer.style.width = selfO.elem.maxWidth+'px';
                        selfO.elem.parentNode.style.height = selfO.elem.maxHeight+'px';
                        var newDiv = document.createElement('div');
                        newDiv.className = 'ssCaption';
                        newDiv.id = 'cap'+selfO.elem.capNum;
                        newDiv.appendChild(document.createTextNode(selfO.elem.pics[selfO.elem.curPic][1]));
                        oSlideShowContainer.appendChild(newDiv);
                        //set up the control buttons
                        switch (selfO.elem.showControls){
                            case true:
                                //create the slide left button
                                var newDiv = document.createElement('div');
                                newDiv.className = 'ssCntlBtnsContainer';
                                var newButton = document.createElement('button');
                                newButton.className = 'ssCtlBtn';
                                newButton.innerHTML = '&lt';
                                newButton.onclick=function(){
                                    selfO.elem.dirn = -selfO.elem.dirn;
                                    selfO.elem.slideDir = -1;
                                }
                                newDiv.appendChild(newButton);
                                //create the play/stop button
                                newButton = document.createElement('button');
                                newButton.className = 'ssCtlBtn';
                                newButton.innerHTML = 'Play';
                                newButton.onclick=function(){
                                    selfO.elem.playing = (selfO.elem.playing)? false : true;
                                    this.innerHTML = (this.innerHTML == 'Play')? 'Stop' : 'Play';
                                    if(selfO.elem.playing){
                                        fade(selfO.elem);
                                    } else {
                                        if(selfO.elem.newImageTimer){clearTimeout(selfO.elem.newImageTimer);}
                                        clearInterval(selfO.elem.fadeTimerImg);
                                    }
                                }
                                newDiv.appendChild(newButton);
                                //create the slide right button
                                var newButton = document.createElement('button');
                                newButton.className = 'ssCtlBtn';
                                newButton.innerHTML = '&gt';
                                newButton.onclick=function(){
                                    selfO.elem.dirn = -selfO.elem.dirn;
                                    selfO.elem.slideDir = 1;
                                }
                                newDiv.appendChild(newButton);
                                //append the control buttons to the slideshow container
                                oSlideShowContainer.appendChild(newDiv);
                                break;
                            case false:
                                setTimeout(function(){fade(selfO.elem);},selfO.elem.lagTime);
                        }
                    }
                }
                window.onload=function(){
                    //load the pics into Image objects
                    var picO = new Array();
                    for(i=0; i < bannerPics.length; i++){
                        picO[i] = new Array();
                        for(j=0; j < bannerPics[i].length; j++){
                            picO[i][j] = new Array();
                            picO[i][j][0] = new Image();
                            picO[i][j][0].src = bannerPics[i][j][0];
                            picO[i][j][1] = bannerPics[i][j][1];
                        }
                    }
                    show1 = new SlideShowObj(document.getElementById('img1'),picO[0]);
                    show1.elem.showControls = false;
                    show1.init();
    
                    show2 = new SlideShowObj(document.getElementById('img2'),picO[1]);
                    show2.elem.lagTime = 5000;
                    show2.elem.showControls = true;
                    show2.init();
                }
            </script>
        </head>
        <body>
            <!-- Preload the images in a hidden container -->
            <div id="preloadedImgsContainer" style="display: none"></div>
            <script type="text/javascript">
                for(i=0; i < bannerPics.length; i++){
                    for(j=0; j < bannerPics[i].length; j++) {
                        var newImg = document.createElement('img');
                        newImg.src = bannerPics[i][j][0];
                        document.getElementById('preloadedImgsContainer').appendChild(newImg);
                    }
                }
            </script>
            <!-- ---------------------End of image preloading ---------------------- -->
            <div id="div1">
                <div>
                    <img id="img1" src="" alt="" />
                </div>
            </div>
            <div id="div2">
                <div>
                    <img id="img2" src="" alt="" />
                </div>
            </div>
        </body>
    </html>


  •  

    Posting Permissions

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