Next-Previous Image Gallery 2

Javascript

:Hits: 770
:Added On: 27 Oct 2006
:Rating:

More improved version of the last one and has captions but does not work in some really old browsers.

«		»

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

Add as many images as you want. Type in the actual source - folder name (if it is in a folder) and extension. // Create an Array of Image Locations

var myImg= new Array()
    myImg[0]= "images/image_1.gif";
    myImg[1]= "personal/holiday.gif";
    myImg[2]= "nature/sky.jpg";
    myImg[3]= "nature/water.png";

C. Configure Captions

Your caption arrays must correspond to the images.

// Create an Array of Captions
var myCap= new Array()
    myCap[0]= "This is an extremely long, ... caption here.";
    myCap[1]= "This is caption 2 for Image 2.";
    myCap[2]= "This is caption 3 for Image 3.";
    myCap[3]= "This is caption 4 for Image 4.";

To remove captions, replace all myCap[i] you see in the script to ''.

Source

External Javascript File [NPIG2.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 2 :: Solomon :: http://www.sleuthz.com/
// Create an Array of Image Locations
var myImg= new Array()
	myImg[0]= "/images/image_1.gif";
	myImg[1]= "/images/image_2.gif";
	myImg[2]= "/images/image_3.gif";
	myImg[3]= "/images/image_4.gif";

// Create an Array of Captions
var myCap= new Array()
	myCap[0]= "This is an extremely long, long, long, longer, longer, longer, longer, longer, longer, longest, longest, longest, longest, longest, longest, longest, longest, longest, caption for Image 1. You may want to use CSS to scroll the caption here.";
	myCap[1]= "This is caption 2 for Image 2.";
	myCap[2]= "This is caption 3 for Image 3.";
	myCap[3]= "This is caption 4 for Image 4.";

// Create Number of Images Variable
var n = myImg.length;

// Create Number Variable
var i = 0;

// Create Image Number Variable
var m = 1;

// Create Function to Load Image
function loadImg(){
// Gives "imgSrc" a Source with Number Variable
	document.imgSrc.src = myImg[i];
// Gives "caption" DIV a content
	document.getElementById("caption").innerHTML = myCap[i];
// Gives "imgNum" DIV the image number
	document.getElementById("imgNum").innerHTML = m + "/" + n;
}

// 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 = n-1;
// Create Current Number Variable which Equals to Image Number Variable
		var c = m = n;
// Otherwise
	}else{
// Next Number Variable Equals to Number Variable - 1
		var l = i-=1;
// Current Number Variable Equals to Image Number Variable - 1
		var c = m-=1;
	}
// Gives "imgSrc" a Source with an Alternative "l" Variable
	document.imgSrc.src = myImg[l];
// Gives "caption" DIV a content
	document.getElementById("caption").innerHTML = myCap[i];
// Gives "imgNum" DIV the image number
	document.getElementById("imgNum").innerHTML = c + "/" + n;
}

// 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>n-2){
// Create Next Number Variable which Equals to Number Variable
		var l = i = 0;
// Create Current Number Variable which Equals to Image Number Variable
		var c = m = 1;
// Otherwise
	}else{
// Next Number Variable Equals to Number Variable + 1
		var l = i+=1;
// Current Number Variable Equals to Image Number Variable + 1
		var c = m+=1;
	}
// Gives "imgSrc" a Source with Next Number Variable
	document.imgSrc.src = myImg[l];
// Gives "caption" DIV a content
	document.getElementById("caption").innerHTML = myCap[i];
// Gives "imgNum" DIV the image number
	document.getElementById("imgNum").innerHTML = m + "/" + n;
}

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

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.