Helpi with slideshow script

Question

azegurb 1 Posting Whiz in Training

13 Years Ago

Hi all,
I have taken slide show script from net. But There some functions i cannot understand
here is script

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title></title>
    <script>
    var interval = 1500;

var random_display = 0;

var imageDir = "my_images/";

    var imageNum = 0;

	imageArray = new Array();

	imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
    imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");

	imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");

	imageArray[imageNum++] = new imageItem(imageDir + "04.jpg");

	imageArray[imageNum++] = new imageItem(imageDir + "05.jpg");
    
    var totalImages = imageArray.length;
    function imageItem(image_location) {

		this.image_item = new Image();

		this.image_item.src = image_location;
                return this.image_item.src;
	}

	function get_ImageItemLocation(imageObj) {

		return(imageObj.image_item.src)

	}
        
        
           alert(imageArray[imageNum].image_item.src);
        
function randNum(x, y) {

		var range = y - x + 1;

return Math.floor(Math.random() * range) + x;

	}
function getNextImage() {

		if (random_display) {

			imageNum = randNum(0, totalImages-1);

		}

		else {

			imageNum = (imageNum+1) % totalImages;

		}

var new_image = get_ImageItemLocation(imageArray[imageNum]);
//alert(new_image)
	return(new_image);

	}
function getPrevImage() {

		imageNum = (imageNum-1) % totalImages;

		var new_image = get_ImageItemLocation(imageArray[imageNum]);

		return(new_image);

	}
function prevImage(place) {

		var new_image = getPrevImage();

		document[place].src = new_image;

	}
function switchImage(place) {

		var new_image = getNextImage();

		document[place].src = new_image;

		var recur_call = "switchImage('"+place+"')";

         timerID = setTimeout(recur_call, interval);

        }

    
    </script>
</head>
<body onLoad="switchImage('slideImg')"> 
    <img name="slideImg" src="27.jpg" width=500 height=375 border=0> 

<a href="#" onClick="switchImage('slideImg')">play slide show</a>
<a href="#" onClick="clearTimeout(timerID)"> pause</a>
<a href="#" onClick="prevImage('slideImg'); clearTimeout(timerID)"> previous</a> 

<a href="#" onClick="switchImage('slideImg'); clearTimeout(timerID)">next </a> 


</body>
</html>

here exactly i dont know what does acctually function of

get_ImageItemLocation(imageObj)

and

imageItem(image_location)

what does these two functions seperately?
Thanks in advance for attention

javascript

Edited 13 Years Ago by azegurb because: n/a

2 Contributors
5 Replies
159 Views
7 Months Discussion Span
Latest Post 13 Years Ago Latest Post by azegurb

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Aze,

The code appears to be a nonsense. I would be surprised if it works. imageItem is a constructor function designed to preload images. It returns the src (location) of the image that it preloads.

However the function get_ImageItemLocation() assumes that imageItem has returned an object.

The whole thing should simplify to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
<title></title>
<script>
var interval = 1500;
var random_display = 0;
var imageDir = "my_images/";
var imageNum = -1;
var place;//For convenience this is best as a global
function imageItem(url) {
	this.img = new Image();
	this.img.src = url;
	this.url = url;
}
var imageArray = [
	new imageItem(imageDir + "01.jpg"),
	new imageItem(imageDir + "02.jpg"),
	new imageItem(imageDir + "03.jpg"),
	new imageItem(imageDir + "04.jpg"),
	new imageItem(imageDir + "05.jpg")
];
function randNum(x, y) {
	var range = y - x + 1;
	return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
	imageNum = (random_display) ? randNum(0, imageArray.length-1) : ((imageNum+1) % imageArray.length);
	return imageArray[imageNum];
}
function getPrevImage() {
//	imageNum = (imageNum-1) % imageArray.length;//This is not correct
	imageNum = (imageNum-1 >= 0) ? (imageNum-1) : (imageArray.length-1);
	return imageArray[imageNum];
}
function prevImage() {
	var image_item = getPrevImage();
	place.src = place.alt = image_item.url;
}
function nextImage() {
	var image_item = getNextImage();
	place.src = place.alt = image_item.url;
}
function play() {
	nextImage();
	timerID = setTimeout(play, interval);
}
window.onload = function(){
	place = document['slideImg'];
	play();
};
</script>
</head>

<body>

<img name="slideImg" src="27.jpg" width="500" height="375" border="0"><br />
<a href="#" onclick="play()">Play slide show</a>&nbsp;|&nbsp;
<a href="#" onclick="clearTimeout(timerID)">Pause</a>&nbsp;|&nbsp;
<a href="#" onclick="clearTimeout(timerID); prevImage();">Previous</a>&nbsp;|&nbsp;
<a href="#" onclick="clearTimeout(timerID); nextImage();">Next</a> &nbsp;

</body>
</html>

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

azegurb 1 Posting Whiz in Training · Answer 1 · 2011-04-26T21:48:18+00:00

Hi Airshow, Thank you very much.
but if do like this

for(var i=0;i<5;i++){
	imageArray[imageNum++] = new imageItem(imageDir +i+ ".jpg");
}

with the help of for loop.
it is not possible to return inside constructor function itself like below

function imageItem(url) {	this.img = new Image();	this.img.src = url;	this.url = url;
return this.url;

}

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2011-04-26T22:47:43+00:00

If you want imageArray to be an array of image urls, then the simplest way is: ...

function imageItem(url) {
	var img = new Image();
	img.src = url;
	return url;
}
for(var i=0; i<5; i++){
	imageArray[i] = imageItem(imageDir + i + ".jpg");
}

Note how imageItem is called without new in this case.

Airshow

azegurb 1 Posting Whiz in Training · Answer 3 · 2011-04-26T22:58:10+00:00

If you want imageArray to be an array of image urls, then the simplest way is: ...
function imageItem(url) {
	var img = new Image();
	img.src = url;
	return url;
}
for(var i=0; i<5; i++){
	imageArray[i] = imageItem(imageDir + i + ".jpg");
}
Note how imageItem is called without new in this case.
Airshow

Ok. I absolutely understood. Previous variant was OOP method so that with "this" keyword was used
Thank you very much again for attention and help

azegurb 1 Posting Whiz in Training · Answer 4 · 2011-11-26T16:21:19+00:00

Hi Airshow,
I have problem with javascript fucntion at this urlhttp://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/396568
Can you help me?
Thanks beforehands