www.webdeveloper.com
Results 1 to 6 of 6

Thread: onClick SlideShow

  1. #1
    Join Date
    May 2007
    Location
    London, United Kingdom
    Posts
    430

    onClick SlideShow

    So, I have an image on my page... And I want, when someone clicks on it, it must cycle through an array of images. However... I can't seem to get it to work.

    HTML Code:
    <div id="slide">	
    <h3>Some of my work</h3>
    <img src="images/slide/slide1.jpg" width="650" height="300" alt="Slide" id="slideShow" onclick="processNext();" />
    </div>
    Code:
    window.onload = initLinks();
    window.onload = processNext();
    
    var slidePics = new Array("images/slide/slide1.jpg","images/slide/slide2.jpg","images/slide/slide3.jpg","images/slide/slide4.jpg","images/slide/slide5.jpg","images/slide/slide6.jpg");
    var thisPic = 0;
    
    function initLinks(){
    	document.getElementById("slideShow").onclick = processNext;	
    	}
    
    function processNext(){
    	thisPic++;
    		if(thisPic == slidePix.length){
    			thisPic = 0;
    			}
    			document.getElementById("slideShow").src = slidePix[thisPic];
    			return false;
    	}
    Thanks in advance ya'll

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Give this a shot:
    Code:
    var slidePics = new Array("images/slide/slide1.jpg","images/slide/slide2.jpg","images/slide/slide3.jpg","images/slide/slide4.jpg","images/slide/slide5.jpg","images/slide/slide6.jpg");
    var thisPic = 0;
    
    function initLinks(){
    	document.getElementById("slideShow").onclick = processNext();	
    	}
    
    function processNext(){
    	thisPic++;
    		if(thisPic == slidePix.length){ // JavaScript arrays start at 0, not 1
    			thisPic = 0;
    			}
    			document.getElementById("slideShow").src = slidePix[thisPic];
    			return false; //Why return false? 
    	}
    
    function onThisLoad() {initLinks(); processNext();}
    window.onload = onThisLoad();
    Not sure I completely follow the logic. If you want the slideshow to start when a user clicks an image, why run the function on window load?

    If you can find an image pre-loader, pre-load the images, THEN run the processNext, that would (IMHO) be better. No having to wait for the image to load from the server if it's already in memory.

    ^_^

  3. #3
    Join Date
    May 2007
    Location
    London, United Kingdom
    Posts
    430

    Lynda.com

    Hi WolfShade. I got the code from a Javascript tutorial from Lynda.com. I am a JS noob really and tried to modify it to suit my needs. Basically, instead of having a next or previous button, I want slide1.jpg to load up on start. Then when a visitor physically clicks on the images, it changes to slide2.jpg and so on, until it goes around back to slide1.jpg.

    PS: I did it the way you showed, still not working... Will keep trying.

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    If the images folder is in the root of the website, be sure to prepend the array values with "/".

    I can take a closer look, this weekend.

    ^_^

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    The slideshow starts when the image is clicked and then stops when the first image is displayed again.
    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>
    
            <script type="text/javascript">
                var picPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'];
                //preload the images
                var oPics = new Array;
                for(i=0; i < picPaths.length; i++){
                    oPics[i] = new Image();
                    oPics[i].src = picPaths[i];
                }
                var curPic = 0;
                function startSlideshow(){
                    curPic = (++curPic > oPics.length - 1)? 0 : curPic;
                    oSlideshow.src = oPics[curPic].src;
                    if(curPic != 0){
                        setTimeout(startSlideshow,2000);  //cycle images every 2 secs.
                    }
                }
                window.onload=function(){
                    oSlideshow = document.getElementById('slideShow');
                    oSlideshow.src = oPics[0].src;
                    oSlideshow.onclick = startSlideshow;
                }
            </script>
        </head>
        <body>
            <div id="slide">
                <h3>Some of my work</h3>
                <img src="" width="650" height="300" alt="Slide" id="slideShow" />
            </div>
        </body>
    </html>
    Last edited by tirna; 02-18-2011 at 09:05 PM.

  6. #6
    Join Date
    May 2007
    Location
    London, United Kingdom
    Posts
    430

    Fixed

    Thanks Tirna... This is the route I ended up going.

    Code:
    window.onload = initLinks;
    
    var myPix = new Array("images/slide/slide1.jpg","images/slide/slide2.jpg","images/slide/slide3.jpg","images/slide/slide4.jpg","images/slide/slide5.jpg","images/slide/slide6.jpg");
    var thisPic = 0;
    
    function initLinks(){
        document.getElementById("nextLink").onclick = processNext;
        }
    
    function processNext(){
        thisPic++;
            if(thisPic == myPix.length){
                thisPic = 0;
                }
                document.getElementById("myPicture").src = myPix[thisPic];
                return false;
        }
    HTML Code:
    <a href="home.php" id="nextLink" onclick="processNext();"><img src="images/slide/slide1.jpg" width="650" height="300" alt="Slide" id="myPicture" /></a>
    Working perfectly on my local server so far :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles