HTML5 canvas slideshow with text display

Schrene · 01-18-2012, 01:25 PM

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.

devnull69 · 01-18-2012, 03:01 PM

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);
	}

Schrene · 01-18-2012, 03:12 PM

Thanks a oodles!
It worked

Schrene · 01-19-2012, 06:00 PM

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?

devnull69 · 01-20-2012, 06:49 AM

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;
	}

Schrene · 01-20-2012, 12:53 PM

Thanks that worked awesome!!

Schrene · 01-20-2012, 12:56 PM

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>