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

    Question HTML5 canvas slideshow with text display

    I am learning Javascript and HTML5...
    I am trying to create a slideshow using canvas with text display of what the current image is. I have done this without canvas but I want to use canvas this time. My idea involves using the file name as the text display.
    Here is my working slideshow..
    Code:
    <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/Summer.jpg", 
    				"images/Spring.jpg", 
    				"images/Fall.jpg",
    				"images/Winter.jpg",
    				"images/Puppies.jpg",
    				"images/Duck.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/Summer.jpg);
    }
    
     
    #center {
    	height: 360px;
    	width: 491px;
    	float: right;
    }
    #slideArea {
    	height: 381px;
    	width: 600px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #right {
    	height: 361px;
    	width: 52px;
    	float: right;
    }
    #left {
    	float: left;
    	height: 360px;
    	width: 52px;
    }
    #nxtBtn {
    	width: 57px;
    	height: 57px;
    	position: relative;
    	top: 120px;
    }
    #bkBtn {
    	height: 57px;
    	width: 57px;
    	position: relative;
    	top: 120px;
    }
    #displayText {
    	width: 600px;
    	height: 20px;
    	float: left;
    	text-align: center;
    }
    -->
        </style>
    </head>
    <body>
    <br />
    <div id="slideArea">
      <div id="right">
      <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
      </div>
    <div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></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
            
    
            
          </canvas>
      
          
        </center>		
      </div>
      <div id="displayText">Display Text</div>
    </div>
    </body>
    </html>
    This is what I came up with so far but it doesn't work.

    Code:
    <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">	
    ////added this code to be able to pull the display text from "imageName"
    var imagePath = ["images/];
    var imageName = [
    				 
    				"Summer", 
    				"Spring", 
    				"Fall",
    				"Winter",
    				"Puppies",
    				"Duck"
    			];
    var imagePaths =  imagePath + imageName + ".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/Summer.jpg);
    }
    
     
    #center {
    	height: 360px;
    	width: 491px;
    	float: right;
    }
    #slideArea {
    	height: 381px;
    	width: 600px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #right {
    	height: 361px;
    	width: 52px;
    	float: right;
    }
    #left {
    	float: left;
    	height: 360px;
    	width: 52px;
    }
    #nxtBtn {
    	width: 57px;
    	height: 57px;
    	position: relative;
    	top: 120px;
    }
    #bkBtn {
    	height: 57px;
    	width: 57px;
    	position: relative;
    	top: 120px;
    }
    #displayText {
    	width: 600px;
    	height: 20px;
    	float: left;
    	text-align: center;
    }
    -->
        </style>
    </head>
    <body>
    <br />
    <div id="slideArea">
      <div id="right">
      <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
      </div>
    <div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></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
            
    
            
          </canvas>
      
          
        </center>		
      </div>
      <div id="displayText">Display Text</div>
    </div>
    </body>
    </htm>
    Any help would be greatly appreciated.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    First: Replace this line of code
    Code:
    var imagePath = ["images/];
    with
    Code:
    var imagePath = "images/";
    The first line had incorrect syntax

    Second:
    Remove this line (incorrect syntax)
    Code:
    var imagePaths =  imagePath + imageName + ".jpg";
    Third: nextImage() should be more like
    Code:
    function nextImage() {
    	currentImage++;
            if (currentImage >= imageName.length) currentImage = 0;
    	img.setAttribute('src',imagePath + imageName[currentImage] + '.jpg');
    	img.onload = function() {
    		showCanvasCtx.drawImage(img,0,0,480,360);
    	}

  • Users who have thanked devnull69 for this post:

    Schrene (01-18-2012)

  • #3
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks a oodles!
    It worked

  • #4
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Well I'm running into road blocks
    Can't quite figure out how to capture the elements from "imageName" and put them in a div to display text that matches name of image...

    I know that I can use....
    Code:
    document.write(imageName);
    to display all of the elements from "imageName"..

    And that you can use....
    Code:
    document.write(imageName[2]);
    to display one of the elements from "imageName"...

    I am at a loss as how to display the element from "imageName" that is currently being displayed in the Canvas. Perhaps if I wrote my array differently?

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    In nextImage() you are putting the new image into the canvas. This is the right place to display its name

    Code:
    function nextImage() {
    	currentImage++;
            if (currentImage >= imageName.length) currentImage = 0;
    	img.setAttribute('src',imagePath + imageName[currentImage] + '.jpg');
    	img.setAttribute('title',imageName[currentImage]);
    	img.onload = function() {
    		showCanvasCtx.drawImage(this,0,0,480,360);
                    // show title of image in a DIV with id titleDiv
                    document.getElementById('titleDiv').innerHTML = this.title;
    	}

  • Users who have thanked devnull69 for this post:

    Schrene (01-20-2012)

  • #6
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks that worked awesome!!

  • #7
    New Coder Schrene's Avatar
    Join Date
    Jan 2011
    Location
    Earth
    Posts
    61
    Thanks
    12
    Thanked 1 Time in 1 Post

    Thumbs up HTML5 slideshow with text display!!

    Here is the complete code just in case someone else is interested.
    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 imagePath = "images/";
    var imageName = [
    				 
    				"Summer", 
    				"Spring", 
    				"Fall",
    				"Winter",
    				"Puppies",
    				"Duck"
    ];
    
    
    			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 >= imageName.length) currentImage = 0;
    	img.setAttribute('src',imagePath + imageName[currentImage] + '.jpg');
    	img.setAttribute('title',imageName[currentImage]);
    	img.onload = function() {
    		showCanvasCtx.drawImage(this,0,0,480,360);
                    // show title of image in a DIV with id titleDiv
                    document.getElementById('titleDiv').innerHTML = this.title;
    	}
    }
    function prevImage() {
        currentImage--;        
    	if (currentImage < 0) currentImage = imageName.length-1;
    	
        img.setAttribute('src',imagePath + imageName[currentImage] + '.jpg');
    	img.setAttribute('title',imageName[currentImage]);
        img.onload = function() {
            showCanvasCtx.drawImage(img,0,0,480,360);
    		document.getElementById('titleDiv').innerHTML = this.title;
        }
    }
    
    	document.write(imageName[3]);
    	
    	
    		
    			</script>
    
    	<style type="text/css">
    <!--
    #showCanvas {
    	background-image: url(images/Summer.jpg);
    }
    
     
    #center {
    	height: 360px;
    	width: 491px;
    	float: right;
    }
    #slideArea {
    	height: 381px;
    	width: 600px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #right {
    	height: 361px;
    	width: 52px;
    	float: right;
    }
    #left {
    	float: left;
    	height: 360px;
    	width: 52px;
    }
    #nxtBtn {
    	width: 57px;
    	height: 57px;
    	position: relative;
    	top: 120px;
    }
    #bkBtn {
    	height: 57px;
    	width: 57px;
    	position: relative;
    	top: 120px;
    }
    #titleDiv {
    	width: 600px;
    	height: 20px;
    	float: left;
    	text-align: center;
    }
    -->
        </style>
    </head>
    <body>
    <br />
    <div id="slideArea">
      <div id="right">
      <a href="#" id="nxtBtn"onClick="nextImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Next','','images/arrow-right-B.png',1)"><img src="images/arrow-right-A.png" name="Next" width="51" height="75" border="0"></a>
      </div>
    <div id="left"> <a href="#" id="bkBtn" onClick="prevImage()"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Left','','images/arrow-left-B.png',1)"><img src="images/arrow-left-A.png" name="Left" width="51" height="75" border="0"></a></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
            
    
            
          </canvas>
      
          
        </center>		
      </div>
      <div id="titleDiv">Display Text</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
    •