How do I make a previous button for a slideshow in javascript?

Page 1 of 1

8 Replies - 993 Views - Last Post: 27 December 2012 - 06:01 AM

#1 James1992  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 121
  • Joined: 30-October 12

How do I make a previous button for a slideshow in javascript?

Posted 10 December 2012 - 03:15 AM

Right, I'm currently creating a website and have decided to include a slideshow. To create the slideshow I am using Javascript. I have the "next" button working fine. This is the code I have used for the next button.

var index=0;
var titles=[1,2,3];

	function Next()
	{
if (index >= 3){index=0}
	var img = document.getElementById("img1");
	var imageToDisplay="../Images/img" + titles[index++] + ".jpg";
	img.src=imageToDisplay;
	}


So now I have decided to create the previous button using the code below. (However it does not function correctly)

function Previous()
	{
if (index <= 0){index=4}
	var img = document.getElementById("img1");
	var imageToDisplay="../Images/img" + titles[index--] + ".jpg";
	img.src=imageToDisplay;
	}


Any ideas on how to make the previous button work?

This post has been edited by Dormilich: 10 December 2012 - 03:31 AM
Reason for edit:: fixed code tags


Is This A Good Question/Topic? 0
  • +

Replies To: How do I make a previous button for a slideshow in javascript?

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: How do I make a previous button for a slideshow in javascript?

Posted 10 December 2012 - 03:24 AM

Hello there,

Take a look at this little snippet I just whipped up for you. It's basically what you have done with a few changes to make things, in my view, better. :)/>
	var current_index = 0 // Our current index
		images = ['img1.jpg', 'img2.jpg', 'img3.jpg']; // Our images
		
	function Next() // Call to go to the next image
	{
		// If we're at the last index, go to zero, else go to the next index
		current_index = (current_index === (images.length - 1) ? 0 : current_index + 1);
		UpdateImage(); // Call update
	}
	
	function Previous() // Call to go to the previous image
	{
		// If we're at the first index (0), go to the last, otherwise go to the previous index
		current_index = (current_index === 0 ? (images.length - 1) : current_index - 1);
		UpdateImage(); // Call update
	}
	
	function UpdateImage() // Call to update the image element
	{
		document.getElementById('img1').src = '../Images/' + images[current_index]; // Self explaining
	}

The first thing we notice is the introduction of ternary statements (shorthand), these allow us to get small IF statements into one line, making the code much more compact and not bloated due to a single statement.

The reason I move more of the image name into the array is a personal preference as it allows for later expansion without having to rework much, for example sudden use of PNG images.

The way I achieved the 'previous' function should be self explanatory, it's just reversing the logic in the 'next' function.

Note: I have not tested the above code, let me know if it's all borked.

This post has been edited by Kruithne: 10 December 2012 - 03:25 AM

Was This Post Helpful? 1
  • +
  • -

#3 James1992  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 121
  • Joined: 30-October 12

Re: How do I make a previous button for a slideshow in javascript?

Posted 10 December 2012 - 03:31 AM

You my friend are a genius! Works wonderfully! And I fully appreciate the use of the array to store the names of the images. Like you said, makes future expansion easier :D
Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: How do I make a previous button for a slideshow in javascript?

Posted 10 December 2012 - 03:33 AM

Glad I could be of service. :)
Was This Post Helpful? 1
  • +
  • -

#5 James1992  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 121
  • Joined: 30-October 12

Re: How do I make a previous button for a slideshow in javascript?

Posted 10 December 2012 - 05:10 AM

I'm adding a first and last button now and im trying to use the code you've supplied.

function First() //Call to go to the first image
{
	
	current_index = 0;
	UpdateImage(); // Call update
}

function Last() //Call to go to the last image
{
	current_index = images.length -1;
	UpdateImage(); // Call update
}


They both work. However, when my page loads, it first shows img3 and not img1. Any reason why this is?
Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: How do I make a previous button for a slideshow in javascript?

Posted 11 December 2012 - 02:11 AM

Well, are you calling any Javascript when the page loads? If not, I would guess it's because your src for the img is set to img3?
Was This Post Helpful? 0
  • +
  • -

#7 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: How do I make a previous button for a slideshow in javascript?

Posted 20 December 2012 - 08:48 AM

For 'Kruithne':

I understand the '==' logic test (I think).

What specifically is the difference between '==' and '===' in your current_index test?

What is the benefit of this in your ternary test?

This post has been edited by JMRKER: 20 December 2012 - 09:05 AM

Was This Post Helpful? 0
  • +
  • -

#8 JMRKER  Icon User is online

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: How do I make a previous button for a slideshow in javascript?

Posted 20 December 2012 - 09:40 AM

View PostJames1992, on 10 December 2012 - 06:10 AM, said:

I'm adding a first and last button now and im trying to use the code you've supplied.

...


They both work. However, when my page loads, it first shows img3 and not img1. Any reason why this is?


Example: (substitute your image location and filenames)
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<button onclick="current_index=0;UpdateImage()">First</button>
<button onclick="Next()">Next</button>
<button onclick="Prev()">Prev</button>
<button onclick="current_index=0;Prev()">Last</button>
<!-- button onclick="LastImage()">Last</button>  ALTERNATIVE -->
<br>
<div style="width:300px">
 <img id="mainImg" src=''>
 <div id="imgCmmt"></div>
</div>

<script type="text/javascript">
var current_index = 0;  // Our current index
var images = [          // Our images
  '11.jpg', '12.jpg', '13.jpg', '14.jpg', '15.jpg'
];
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';

window.onload = function() {
  current_index = 0;  UpdateImage();
}	
function Next() { // Call to go to the next image
// If we're at the last index, go to zero, else go to the next index
  current_index = (current_index === (images.length - 1) ? 0 : current_index + 1);
  UpdateImage(); // Call update
}

function Prev() { // Call to go to the previous image
// If we're at the first index (0), go to the last, otherwise go to the previous index
  current_index = (current_index === 0 ? (images.length - 1) : current_index - 1);
  UpdateImage(); // Call update
}
/*  Not currently used -- ALTERNATIVE function
function LastImage() { // either line works
  current_index = images.length-1;  UpdateImage();
//  current_index = 0;  Prev();
}
*/
function UpdateImage() { // Call to update the image element
  document.getElementById('mainImg').src = baseURL + images[current_index]; // Self explaining
  document.getElementById('imgCmmt').innerHTML = current_index+' | '+images[current_index];
}
</script>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2896
  • View blog
  • Posts: 7,549
  • Joined: 08-June 10

Re: How do I make a previous button for a slideshow in javascript?

Posted 27 December 2012 - 06:01 AM

View PostJMRKER, on 20 December 2012 - 04:48 PM, said:

What specifically is the difference between '==' and '===' in your current_index test?

=== is type-safe comparison, i.e. it does not coerce types when different.
// examples

1 ==  "1"   // true
1 === "1"   // false (number vs. string)

0 ==  false // true
0 === false // false (number vs. boolean)

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1