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

    3 way javascript image slideshow

    http://www.javascriptkit.com/script/...2/3slide.shtml

    Hi i have the above image slideshow script running fine on a webpage

    can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page?

    Ive tried editing variables but i cant work it out. would be much appreciated

    Ta

  • #2
    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 create as many slideshows on a page as you like using a single javascript object.

    bannerPics is an array of 2D arrays containing the pics and their optional captions for each slideshow.

    For the demo, in the window.onload I create 2 instances of the slideshow. One with control buttons and one without controls which loops continually automatically.

    It works in IE9, FF5 and the other major browsers.

    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>
    Last edited by bullant; 07-07-2011 at 12:49 AM.

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    paulairdrie:

    Here's my cross-browser application:

    Thumbnail Slideshow Creator


  •  

    Posting Permissions

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