Next-Previous Image Gallery

Javascript

:Hits: 1682
:Added On: 31 May 2006
:Rating:

Simple image gallery by clicking the arrows to view the next or previous picture.

Notes

A. External JS File

You can choose to place the script in the head of your document or in an external .js file. Make sure that when inserting the head HTML, your source is the name of your .js file.

B. Image Folder

Configure the folder of the images.

// Tells Browser Where to Find the Image
var myImgSrc = "images/";

C. Configure Image Extension

This gallery supports only one type of file extension but you can make edits so that it can support multiple file extensions. Configure it to either .gif, .jpg or any other image extensions.

// Tells Browser the Type of File
var myImgEnd = ".gif";

D. Adding Images

Go over to...

var myImg= new Array()

Edit and insert as many arrays as you want. Put it only the file name, no folder name or extension, unless you have edited it to support multiple extensions.

	myImg[0]= "image_1";
	...       ...
	...       ...
	...       ...
	myImg[11]= "image_12";
	myImg[12]= "image_13";

E. Configure Array Number

// If the Number Variable is More Than [Minus 1 of the Number of Arrays]
	if(i>2){

As stated in the previous step, an example, I have 13 image, a total of 12 arrays, so I type in 11.

	if(i>11){

F. Loop Gallery:Last to First

To have the next button at the last image jump back to the first image, refer to your next() function.

// Create Next Number Variable which Equals to Number Variable
	var l = i

Simply give var l and i a zero value.

	var l = i = 0;

G. Loop Gallery:First to Last

For the previous button at image 1 to jump to the last image, refer to the prev() function.

// Create Another Next Number Variable which Equals to Number Variable
	var l = i

Simply change the value of l and i by adding equal to one less of the number of images.

	var l = i = myImg.length-1;

Source

External Javascript File [NPIG.js] . Head . Body

I am very interested to know who uses my scripts, for statistic purposes.
If you have the time, I would really appreciate if you could kindly fill in this form.
Please fill in all the fields so that the data will be saved. Thank you.

Name:
URL:
Rating:

// Next-Previous Image Gallery :: Solomon :: http://www.sleuthz.com/
// Create an Array of Image Names
var myImg= new Array()
	myImg[0]= "image_1";
	myImg[1]= "image_2";
	myImg[2]= "image_3";
	myImg[3]= "image_4";
	
// Tells Browser Where to Find the Image
var myImgSrc = "/images/";

// Tells Browser the Type of File
var myImgEnd = ".gif";

// Create Number Variable
var i = 0;

// Create Function to Load Image
function loadImg(){
// Gives "imgSrc" a Source with Number Variable
	document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create Link Function to Switch Image Backward
function prev(){
// Create If/Else Statement to Stop at Certain Image
// If the Number Variable is Less Than 1
	if(i<1){
// Create Another Next Number Variable which Equals to Number Variable
		var l = i;
// Otherwise
	}else{
// Next Number Variable Equals to Number Variable - 1
		var l = i-=1;
	}
// Gives "imgSrc" a Source with an Alternative "l" Variable
	document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Create Link Function to Switch Image Forward
function next(){
// Create If/Else Statement to Stop at Certain Image
// If the Number Variable is More Than [Minus 1 of the Number of Arrays]
	if(i>2){
// Create Next Number Variable which Equals to Number Variable
		var l = i;
// Otherwise
	}else{
// Next Number Variable Equals to Number Variable + 1
		var l = i+=1;
	}
// Gives "imgSrc" a Source with Next Number Variable
	document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

Oldest to Newest

Comments

Name:

Email:

Website:

Comment:

By submitting your comments, you agree to the terms and conditions.

Name:
Email:
Website:
Comment:
By submitting your comments, you agree to the terms and conditions.