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..

<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">

</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.:(

<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">

</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.:D

devnull69

01-18-2012, 03:01 PM

First: Replace this line of code

var imagePath = ["images/];

with

var imagePath = "images/";

The first line had incorrect syntax

Second:
Remove this line (incorrect syntax)

var imagePaths = imagePath + imageName + ".jpg";

Third: nextImage() should be more like

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
:thumbsup:

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....

document.write(imageName);

to display all of the elements from "imageName"..

And that you can use....

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?:confused:

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

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!!:thumbsup:

Schrene

01-20-2012, 12:56 PM

Here is the complete code just in case someone else is interested.:cool:

<!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">

</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>