...

View Full Version : Simple javascript loop



silent_thunder8
01-23-2012, 09:04 PM
Hi guys

I have what i think is a fairly simple script used for an image gallery with a next and back button. It seems to work pretty well, but i would like to make the gallery scroll round... ie when the user reaches the last picture and presses the next button again, the first image will be displayed again - and visa versa with the first image and the back button.

Below is my JS, can post the small amount of HTML that calls it if necessary.

Any help MUCH appreciated, been messing around with it for ages and being the newbie i am, can't seem to find any way of doing it :(


// List image names without extension
var myImg= new Array(6)
myImg[0]= "performance2011";
myImg[1]= "performance2005";
myImg[2]= "performance2006";
myImg[3]= "performance2007";
myImg[4]= "performance2008";
myImg[5]= "performance2009";
myImg[6]= "performance2010";

// Tell browser where to find the image
myImgSrc = "../images/";

// Tell browser the type of file
myImgEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}


// Create link function to switch image forward
function next(){
if(i>5){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Load function after page loads
window.onload=loadImg;

Old Pedant
01-23-2012, 11:33 PM
// Create link function to switch image backward
function prev(){
--i;
if ( i < 0 ) i = myImg.length - 1;
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image forward
function next(){
++i;
if ( i >= myImg.length ) i = 0;
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

leapinglemur55
01-23-2012, 11:41 PM
I'd recommend using the length of your img array instead of hardcoding in the numbers (that way you can add or subtract images from your slideshow just by adding them to the array, without having to change the functions as well). This way the functions can just check if i has passed the end of the array, and if it has then set it back to the beginning, or vice versa.

Try changing your prev and next functions to this (not tested):


// Create link function to switch image backward
function prev(){
i -= 1;
if (i < 0) {
i = myImg.length() - 1;
}
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image forward
function next(){
i += 1;
if(i > myImg.length() - 1){
i = 0;
}
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

Edit: Just like Old Pedant said. Damn, spent too long on my reply.

silent_thunder8
01-24-2012, 12:18 AM
Thanks guys, that worked absolutely spot on :thumbsup:


I'd recommend using the length of your img array instead of hardcoding in the numbers (that way you can add or subtract images from your slideshow just by adding them to the array, without having to change the functions as well). This way the functions can just check if i has passed the end of the array, and if it has then set it back to the beginning, or vice versa.

I know what you're getting at but i've gotta say, i really am knew to this - you're gonna have to spell it out for me lol :o

leapinglemur55
01-26-2012, 08:03 AM
Don't worry I'm pretty new too :p but the new functions that OldPedant wrote will work with an image array that's of ANY length, whereas the way you wrote yours would only work with an array of 7 elements, and you would have to edit the functions themselves each time you wanted to change the number of pictures in the slideshow.

Old:

// Create link function to switch image forward
function next(){
if(i>5){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
New (mine):

// Create link function to switch image forward
function next(){
i += 1;
if(i > myImg.length() - 1){
i = 0;
}
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
New (OldPedant):

// Create link function to switch image forward
function next(){
++i;
if ( i >= myImg.length ) i = 0;
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
The hardcoded 5 in blue above is replaced with the length of the array, among other changes for simplification.

Also for style, usually it's a good idea not to use letters that look like numbers or vice versa, such as l (ell) - I (i) - 1 (one) and o (ohh) - 0 (zero), as variable names, because people reading your code can easily get confused (in some fonts they look almost identical).

silent_thunder8
01-28-2012, 11:44 AM
Don't worry I'm pretty new too :p but the new functions that OldPedant wrote will work with an image array that's of ANY length, whereas the way you wrote yours would only work with an array of 7 elements, and you would have to edit the functions themselves each time you wanted to change the number of pictures in the slideshow.

Old:

// Create link function to switch image forward
function next(){
if(i>5){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
New (mine):

// Create link function to switch image forward
function next(){
i += 1;
if(i > myImg.length() - 1){
i = 0;
}
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
New (OldPedant):

// Create link function to switch image forward
function next(){
++i;
if ( i >= myImg.length ) i = 0;
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
The hardcoded 5 in blue above is replaced with the length of the array, among other changes for simplification.

Also for style, usually it's a good idea not to use letters that look like numbers or vice versa, such as l (ell) - I (i) - 1 (one) and o (ohh) - 0 (zero), as variable names, because people reading your code can easily get confused (in some fonts they look almost identical).

Got it!! Thanks for all the help :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum