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 14 of 14
  1. #1
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post

    Question JS Next and Prev on HTML5 slideshow

    I followed a tutorial on Lynda for a simple HTML5 slideshow and altered it so that it doesn't auto play and has next and previous button controls.
    I can't quite figure out the previous button.
    Code:
    </script>        
    <script type="text/javascript">       
    var imagePaths = [
                     
                    "images/Test-1.jpg",
                    "images/Test-2.jpg",
                    "images/Test-3.jpg",
                    "images/Test-4.jpg"
                ];
                var showCanvas = null;
                var showCanvasCtx = null;
                var img = document.createElement("img");
                var currentImage = 1;
    
                window.onload = function () {
                    showCanvas = document.getElementById('showCanvas');
                    showCanvasCtx = showCanvas.getContext('2d');
                   
                    img.setAttribute('width','480');
                    img.setAttribute('height','360');
                   
                    }
               
                function nextImage() {
                    img.setAttribute('src',imagePaths[currentImage++]);
                    img.onload = function() {
                        if (currentImage >= imagePaths.length)
                            currentImage = 0;
                       
                        showCanvasCtx.drawImage(img,0,0,480,360);
                    }
                }
                    function prevImage() {
                    img.setAttribute('src',imagePaths[currentImage--]);
                    img.onload = function() {
                        if (currentImage > imagePaths.length)
                            currentImage = 0;
                       
                        showCanvasCtx.drawImage(img,0,0,480,360);
                    }
                }
               
                </script>
    
    
    </head>
    <body >
    <br />
    <div id="slideArea">
      <div id="right"><input id="nxtBtn" value="Next" type="button" onclick="nextImage()"></div>
     
     
      <div id="left"> <input id="bkBtn"value="Back" type="button" onclick="prevImage()"></div>
      <div id="center">
        <center>
          <canvas id="showCanvas" width="480" height="360" >
           
            Your browser does not support the canvas tag.
            <br />
            Please upgrade your browser
            <br /><br />
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Firefox','','../../_images/Logo-FirefoxB.png',1)"><img src="../../_images/Logo-Firefox.png" name="Firefox" width="50" height="50" border="0"></a>
            <a href="https://www.google.com/chrome" target="_blank" onmouseover="MM_swapImage('Chrome','','../../_images/Logo-ChromeB.png',1)" onmouseout="MM_swapImgRestore()"><img src="../../_images/Logo-Chrome.png" name="Chrome" width="50" height="50" border="0" id="Chrome" /></a>
            <a href="http://www.apple.com/safari/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Safari','','../../_images/Logo-SafariB.png',1)"><img src="../../_images/Logo-Safari.png" name="Safari" width="50" height="50" border="0" id="Safari" /></a>
            <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('IE','','../../_images/Logo-IEB.png',1)"><img src="../../_images/Logo-IE.png" name="IE" width="50" height="50" border="0" id="IE" /></a>
            <a href="http://www.opera.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Opera','','../../_images/Logo-OperaB.png',1)"><img src="../../_images/Logo-Opera.png" name="Opera" width="50" height="50" border="0" id="Opera" /></a>
           
          </canvas>
     
         
        </center>
    This doesn't quite work. If you click on the back button it goes forward one slide then back

    Then when you click the next button you have to click it several times before it will go forward again.
    Any help would be greatly appreciated

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    Some of your code is missing and I don't have the images to test with,
    but part of your problem is in the following function:
    Code:
                    function prevImage() {
                        img.setAttribute('src',imagePaths[currentImage--]);
                        img.onload = function() {
                        if (currentImage > imagePaths.length) currentImage = 0;
                        showCanvasCtx.drawImage(img,0,0,480,360);
                    }
    You need the following changes...
    Code:
                    function prevImage() {
                        img.setAttribute('src',imagePaths[currentImage--]);
                        img.onload = function() {
                        if (currentImage < 0) currentImage = imagePaths.length-1;
                        showCanvasCtx.drawImage(img,0,0,480,360);
                    }
    You decrement the currentImage pointer, but you test it against the array length.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    There is no need to use the onload event to monitor the value of your indexing variable. Indeed the idea is flawed because if the index is out of range, you're not going to get an onload event.

  • #4
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    I left out the hover images part of the code and the CSS.
    Didn't think they were necessary...???

    I made the changes to the code that you suggested:
    Code:
                    function prevImage() {
                        img.setAttribute('src',imagePaths[currentImage--]);
                        img.onload = function() {
                        if (currentImage < 0) currentImage = imagePaths.length-1;
                        showCanvasCtx.drawImage(img,0,0,480,360);
                    }
    It still isn't working quite right...
    Here is my sample link: http://schrene.web44.net/_media_cent..._template.html

  • #5
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Logic Ali View Post
    There is no need to use the onload event to monitor the value of your indexing variable. Indeed the idea is flawed because if the index is out of range, you're not going to get an onload event.
    Not sure what you are referring to exactly but it's my understanding that the HTML5 canvas will not load without the onload event. I am new to HTML5... but every tutorial I have seen uses an onload event to get the HTML5 canvas to load.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    The crux of the problem is that you are setting the value of the currentImage AFTER you have displayed the image.

    Reverse the order:
    1. Update the currentImage variable and then
    2. Display the image.

  • #7
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jmrker View Post
    The crux of the problem is that you are setting the value of the currentImage AFTER you have displayed the image.

    Reverse the order:
    1. Update the currentImage variable and then
    2. Display the image.
    I guess I'm a little confused because this is my understanding of the functions
    Code:
    			function nextImage() {
    				img.setAttribute('src',imagePaths[currentImage++]);
    				img.onload = function() {
    					
    					if (currentImage >= imagePaths.length) currentImage = 0;///Update the currentImage variable
    					showCanvasCtx.drawImage(img,0,0,480,360);///Display the image. 	
    					
    					
    				}
    			}
    				                function prevImage() {
                        img.setAttribute('src',imagePaths[currentImage--]);
                        img.onload = function() {
                         
    					 if (currentImage < 0) currentImage = imagePaths.length-1;///Update the currentImage variable
    					showCanvasCtx.drawImage(img,0,0,480,360);///Display the image. 
                       
                    }
    			}

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    Look at what happens with the following actions:

    Initially currentImage is set to 1 (I would have used 0, but it's your program so I'll use your code).
    Then if the following buttons are pressed, the displays will be:
    Code:
       Next Next Prev Prev Next Next      Actions
    
    1     2    3    4    3    2    3      Effects
    
    1     2    3    2    1    2    3      Expected effects
    The problem is because the currentImage pointer is being incremented/decremented after the display action has had it effect.

    Fix your logic and at least that one problem will go away.
    You may have other problems with your onload logic, but I'm not commenting on that yet

  • #9
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Actually as I posted in the beginning this is code I got from Lynda tutorial.
    It was a slide show that auto played with no controls.
    Code:
    <script type="text/javascript">
    			var imagePaths = [
    				"images/j0149014.jpg", 
    				"images/j0149024.jpg", 
    				"images/j0149029.jpg", 
    				"images/j0178677.jpg"
    			];
    			var showCanvas = null;
    			var showCanvasCtx = null;
    			var img = document.createElement("img");
    			var currentImage = 0;
    
    			window.onload = function () {
    				showCanvas = document.getElementById('showCanvas');
    				showCanvasCtx = showCanvas.getContext('2d');
    				
    				img.setAttribute('width','600');
    				img.setAttribute('height','400');
    				switchImage();
    				
    				// start the animation
    				setInterval(switchImage,3000);
    			}
    			
    			function switchImage() {
    				img.setAttribute('src',imagePaths[currentImage++]);
    				img.onload = function() {
    					if (currentImage >= imagePaths.length)
    						currentImage = 0;
    					
    					showCanvasCtx.drawImage(img,0,0,600,400);
    				}
    			}
    		</script>
    I made a few changes and this is what I came up with so far....
    I am having problems understanding the logic of adding a Next and Prev button...that's why I asked for help..


    I changed the initial value from 0 to 1 because there was a blank screen on page load so I used CSS to have the initial slide as the background.
    If you use 0 as the initial value when you click Next you get this effect: 1,1,2,3,4. If you set the initial value to 1 you get this effect: 1,2,3,4.

    I just want a simple HTML slideshow to replace all of the slideshows I created in Flash. I tried this tutorial http://tutorialzine.com/2010/09/html...deshow-jquery/ which works great but it's not exactly "simple".... and I ran into a strange problem that I wasn't sure how to fix... The slideshow works great on my pc on all browsers... but when I tested it on my iPhone any slideshow with more than 14 slides did not work.

    I tried to find help with that but no one seemed to know the answer...
    So I dumped that in search of something else so far the tutorial on Linda is all that I have come up with. If I could just get working Next and Prev buttons.... I would be happy

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    If you are not going to fix what I told you and you don't care what gallery you use,
    then try this simplified version: http://www.javascriptsource.com/imag...e-gallery.html

  • #11
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    I just don't understand how to change the logic.
    I have tried several different things... and nothing I have tried works...
    I am still learning...and want to learn more

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    I would suggest that if you are a beginner, you try simpler things to modify before you advance to the more difficult.
    You seem to want to do things the hard way, so see what changes I have made (line by line) to create this version with the changed logic.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>	
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		
    <title>Slide Show</title> 
    <script type="text/javascript">
    // From: http://www.codingforums.com/newreply.php?do=postreply&t=248382
    
    var baseURL = 'http://schrene.web44.net/_media_center/_slideshows/';     
    var imagePaths = [
    	"images/Test-1.jpg", 
    	"images/Test-2.jpg", 
    	"images/Test-3.jpg",
    	"images/Test-4.jpg"
    ];
    var showCanvas = null;
    var showCanvasCtx = null;
    var img = document.createElement("img");
    var currentImage = 0;
    
    window.onload = function () {
    	showCanvas = document.getElementById('showCanvas');
    	showCanvasCtx = showCanvas.getContext('2d');
    	img.setAttribute('width','480');
    	img.setAttribute('height','360');
    }
    			
    function nextImage() {
    	currentImage++;		if (currentImage >= imagePaths.length) currentImage = 0;
    	img.setAttribute('src',baseURL+imagePaths[currentImage]);
    	img.onload = function() {
    		showCanvasCtx.drawImage(img,0,0,480,360);
    	}
    }
    function prevImage() {
        currentImage--;        if (currentImage < 0) currentImage = imagePaths.length-1;
        img.setAttribute('src',baseURL+imagePaths[currentImage]);
        img.onload = function() {
            showCanvasCtx.drawImage(img,0,0,480,360);
        }
    }
    			
    			</script>
    
    <style type="text/css">
    #showCanvas {
    	background-image: url(http://schrene.web44.net/_media_center/_slideshows/images/Test-1.jpg);
    }
    #center {
    	height: 380px;
    	width: 481px;
    	float: right;
    }
    #slideArea {
    	height: 381px;
    	width: 600px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #right {
    	height: 381px;
    	width: 59px;
    	float: right;
    }
    #left {
    	float: left;
    	height: 381px;
    	width: 59px;
    }
    #nxtBtn {
    	width: 57px;
    	height: 57px;
    	float: right;
    }
    #bkBtn {
    	float: left;
    	height: 57px;
    	width: 57px;
    }
    </style>
    </head>
    <body >
    <br />
    
    <div id="slideArea">
      <div id="right"><input id="nxtBtn" value="Next" type="button" onClick="nextImage()"></div>
      <div id="left"> <input id="bkBtn"value="Back" type="button" onClick="prevImage()"></div>
      
      <div id="center">
        <center>
          <canvas id="showCanvas" width="480" height="360" >
            Your browser does not support the canvas tag.
            <br /> Please upgrade your browser <br /><br />
          </canvas>
        </center>		
      </div>
    </div>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    Schrene (01-11-2012)

  • #13
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Awesome!!!
    It worked
    Thank you so much for your help
    Yes I do tend to do things the "hard" way..
    Guess I just like the challenge!!! LOL
    Here is my completed test code:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>	
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		
    <title>Slide Show</title> 
    <script type="text/javascript">	           
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script> 		
    <script type="text/javascript">		
    var imagePaths = [
    				 
    				"images/Test-1.jpg", 
    				"images/Test-2.jpg", 
    				"images/Test-3.jpg",
    				"images/Test-4.jpg",
    				"images/Test-5.jpg"
    			];
    			var showCanvas = null;
    			var showCanvasCtx = null;
    			var img = document.createElement("img");
    			var currentImage = 0;
    
    			window.onload = function () {
    				showCanvas = document.getElementById('showCanvas');
    				showCanvasCtx = showCanvas.getContext('2d');
    				
    				img.setAttribute('width','480');
    				img.setAttribute('height','360');
    				
    				}
    			
    			function nextImage() {
    	currentImage++;		if (currentImage >= imagePaths.length) currentImage = 0;
    	img.setAttribute('src',imagePaths[currentImage]);
    	img.onload = function() {
    		showCanvasCtx.drawImage(img,0,0,480,360);
    	}
    }
    function prevImage() {
        currentImage--;        if (currentImage < 0) currentImage = imagePaths.length-1;
        img.setAttribute('src',imagePaths[currentImage]);
        img.onload = function() {
            showCanvasCtx.drawImage(img,0,0,480,360);
        }
    }
    			
    			</script>
    
    	<style type="text/css">
    <!--
    #showCanvas {
    	background-image: url(images/Test-1.jpg);
    	border: thin dotted #F00;
    }
    #center {
    	height: 380px;
    	width: 481px;
    	float: right;
    }
    #slideArea {
    	height: 381px;
    	width: 600px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #right {
    	height: 381px;
    	width: 59px;
    	float: right;
    }
    #left {
    	float: left;
    	height: 381px;
    	width: 59px;
    }
    #nxtBtn {
    	width: 57px;
    	height: 57px;
    	float: right;
    	position: relative;
    	top: 115px;
    }
    #bkBtn {
    	float: left;
    	height: 57px;
    	width: 57px;
    	position: relative;
    	top: 115px;
    }
    -->
        </style>
    </head>
    <body >
    <br />
    <div id="slideArea">
      <div id="right"><input id="nxtBtn" value="Next" type="button" onClick="nextImage()"></div>
      
      
      <div id="left"> <input id="bkBtn"value="Back" type="button" onClick="prevImage()"></div>
      <div id="center">
        <center>
          <canvas id="showCanvas" width="480" height="360" >
            
            Your browser does not support the canvas tag.
            <br />
            Please upgrade your browser
            <br /><br />
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Firefox','','../../_images/Logo-FirefoxB.png',1)"><img src="../../_images/Logo-Firefox.png" name="Firefox" width="50" height="50" border="0"></a>
            <a href="https://www.google.com/chrome" target="_blank" onMouseOver="MM_swapImage('Chrome','','../../_images/Logo-ChromeB.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../../_images/Logo-Chrome.png" name="Chrome" width="50" height="50" border="0" id="Chrome" /></a> 
            <a href="http://www.apple.com/safari/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Safari','','../../_images/Logo-SafariB.png',1)"><img src="../../_images/Logo-Safari.png" name="Safari" width="50" height="50" border="0" id="Safari" /></a> 
            <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('IE','','../../_images/Logo-IEB.png',1)"><img src="../../_images/Logo-IE.png" name="IE" width="50" height="50" border="0" id="IE" /></a> 
            <a href="http://www.opera.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Opera','','../../_images/Logo-OperaB.png',1)"><img src="../../_images/Logo-Opera.png" name="Opera" width="50" height="50" border="0" id="Opera" /></a> 
            
          </canvas>
      
          
        </center>		
      </div>
    </div>
    </body>
    </html>
    Yes I did learn a lot in comparing the changes you made with ones I had tried. I now know what works and what doesn't work and the function of parts of the code. And now on to another mountain to climb...because there more exciting than mole hills... LOL
    Thanks again you Rock!!

  • #14
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    You're most welcome.
    Happy to help.
    Good Luck!


  •  

    Posting Permissions

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