...

View Full Version : JS Next and Prev on HTML5 slideshow



Schrene
01-10-2012, 12:15 AM
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.


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

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

jmrker
01-10-2012, 03:11 AM
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:


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


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.

Logic Ali
01-10-2012, 03:35 AM
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.

Schrene
01-10-2012, 03:43 PM
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:


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_center/_slideshows/SlideShow_template.html

Schrene
01-10-2012, 03:49 PM
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.

jmrker
01-10-2012, 03:50 PM
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.

Schrene
01-10-2012, 05:00 PM
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:confused:


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.

}
}

jmrker
01-10-2012, 05:33 PM
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:


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

Schrene
01-10-2012, 06:59 PM
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.

<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/html5-canvas-slideshow-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:)

jmrker
01-10-2012, 07:49 PM
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/image-effects/simple-image-gallery.html

Schrene
01-10-2012, 08:30 PM
I just don't understand how to change the logic.:confused:
I have tried several different things... and nothing I have tried works...
I am still learning...and want to learn more

jmrker
01-11-2012, 04:17 AM
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.


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

Schrene
01-11-2012, 04:33 PM
Awesome!!!
It worked:thumbsup:
Thank you so much for your help:D
Yes I do tend to do things the "hard" way.. :rolleyes:
Guess I just like the challenge!!! LOL
Here is my completed test 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!!:thumbsup:

jmrker
01-11-2012, 05:00 PM
You're most welcome.
Happy to help.
Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum