PDA

View Full Version : ImageSwitcher Simple JS

orca8767
08-13-2009, 05:16 PM
imageSwitcher.js
function ImageSwitcher (id, imgs, start) {
this.init (id, imgs, start);
}

ImageSwitcher.prototype = {
constructor: ImageSwitcher,

init: function(id, imgs, start) {
this.imgID = id;
this.images = imgs;
this.lastImg = this.images.length - 1;
this.currentImg = start && typeof start == 'number' ? start - 1 : 0;
},

next: function() {
nextImg = this.currentImg + 1;
if(this.currentImg >= this.lastImg) {
document.getElementById(this.imgID).src = this.images[0];
this.currentImg = 0;
} else {
document.getElementById(this.imgID).src = this.images[nextImg];
this.currentImg = nextImg;
}
},

previous: function() {
previousImg = this.currentImg - 1;
if(this.currentImg <= 0) {
document.getElementById(this.imgID).src = this.images[this.lastImg];
this.currentImg = this.lastImg;
} else {
document.getElementById(this.imgID).src = this.images[previousImg];
this.currentImg = previousImg;
}
},

goTo: function(number) {
if(this.images[number - 1]) {
document.getElementById(this.imgID).src = this.images[number - 1];
this.currentImg = number - 1;
return true;
}
return false;
}
};

Thanks to Trinithis for the Prototype source. :D

var imageSwitcher = new ImageSwitcher(string id, array images [, int start]);
This Initializes the script, and sets the settings.
string id
The ID of the image.
array images
An array containing all of the images that you want to be swapped out with eachother.
int start - Optional
The number image you want to start at.
DEFAULT VALUE: 1.
LOWEST VALUE: 1.

void imageSwitcher.previous();
Goes to the previous image in the array.

void imageSwitcher.next();
Goes to the next image in the array.

bool imageSwitcher.goTo(int number);
Goes to a certain image in the array.
int number
The number image you want to switch to.
LOWEST VALUE: 1.
Return Values
true - The number provided was valid, and the switch succeeded.
false - The number provided was not valid, and the switch did not succeed.


An example of the usage is:
<html>
<head>
<title>test</title>
<script type="text/javascript" src="imageSwitcher.js"></script>
</head>
<body>
<script type="text/javascript">
var imageSwitcher = new ImageSwitcher('img', [
'Image1.jpg',
'Image2.jpg',
'Image3.jpg',
], 2);
window.setTimeout(function() {
return imageSwitcher.goTo(3);
}, 5000);
var imageSwitcher2 = new ImageSwitcher('img2', [
'Image4.jpg',
'Image5.jpg',
'Image6.jpg',
]);
</script>
<img id="img" src="Image2.gif" /><br />
<a href="javascript:void(0);" onclick="imageSwitcher.previous();">Previous</a> |
<a href="javascript:void(0);" onclick="imageSwitcher.next();">Next</a> |
<a href="javascript:void(0);" onclick="return imageSwitcher.goTo(1);">Go to #1</a><br />
<img id="img2" src="Image4.gif" /><br />
<a href="javascript:void(0);" onclick="imageSwitcher2.previous();">Previous</a> |
<a href="javascript:void(0);" onclick="imageSwitcher2.next();">Next</a> |
<a href="javascript:void(0);" onclick="return imageSwitcher2.goTo(1);">Go to #1</a><br />
</body>
</html>
Trinithis
08-13-2009, 07:10 PM
function ImageSwitcher (id, imgs, start) {
this.init (id, imgs, start);
}

ImageSwitcher.prototype = {

constructor: ImageSwitcher

, init: function(id, imgs, start) {
this.imgID = id;
this.images = imgs;
this.lastImg = this.images.length - 1;
this.currentImg = start && typeof start == 'number' ? start - 1 : 0;
}

, next: function() {
nextImg = this.currentImg + 1;
if(this.currentImg == this.lastImg) {
document.getElementById(this.imgID).src = this.images[0];
this.currentImg = 0;
} else {
document.getElementById(this.imgID).src = this.images[nextImg];
this.currentImg = nextImg;
}
}

, previous = function() {
previousImg = this.currentImg - 1;
if(this.currentImg == 0) {
document.getElementById(this.imgID).src = this.images[this.lastImg];
this.currentImg = this.lastImg;
} else {
document.getElementById(this.imgID).src = this.images[previousImg];
this.currentImg = previousImg;
}
}

, goTo = function(number) {
if(this.images[number - 1]) {
document.getElementById(this.imgID).src = this.images[number - 1];
this.currentImg = number - 1;
return true;
}
return false;
}
};



<html>
<head>
<title>test</title>
<script type="text/javascript" src="imageSwitcher.js"></script>
</head>
<body>
<script type="text/javascript">

var imageSwitcher = new ImageSwitcher ('img', [
'Image1.gif'
, 'Image2.gif'
, 'Image3.gif'
]
);

setTimeout (function () {
return imageSwitcher.goTo (3);
}, 5000);

</script>
<img id="img" src="Image1.gif" /><br />
<a href="javascript:void(0);" onclick="imageSwitcher.previous();">Previous</a>
<a href="javascript:void(0);" onclick="imageSwitcher.next();">Next</a>
</body>
</html>
orca8767
08-14-2009, 01:43 AM
ZOMG tyvm!! That's exactly what I was looking on how to do!! I'm thanking your post, and I would give you +++rep if I could. :P
Updating the code now.

EDIT:
it seems it still refuses to run multiple instances of the script, even after making sure that the second one is named differently.
Know how to fix this?
Trinithis
08-14-2009, 02:58 AM
You are overriding the constructor function. Notice the case differences in my code.
orca8767
08-14-2009, 03:32 AM
AHA! Thanks very much, I'll update the code here in a few. :)