Simple JavaScript Image Gallery
Hello guys, I had to work on a website this weekend and I came up with an issue, I did not have any image JavaScript gallery that would just change the image and have a previous and next button. So I decided to create this. Here is a basic gallery, I have commented the script for easier understanding.
<script>
//Create variables
var i = 0;
var prev;
var next;
var images = new Array;
//Set Image File Name
images = [
“firstimage”,
“secondimage,
“thirdimage”
];
//Go directly to image function
function imgPresent(src){
var change = document.getElementById(???imgBig???);
//Change main picture source and alt fields
change.src =images[src]+???.jpg???;
change.alt = images[src];
}
// link function to switch image backward
function prev(){
if(i==0){
//Set maximum number in array
i = 2;
} else {
i = i-=1;
}
//CHange Main Image
var change = document.getElementById(???imgBig???);
change.src = images[i]+???.jpg???;
change.alt = images[i];
}
// link function to switch image forward
function next(){
//Set Max Number
if(i==2){
i = 0;
} else {
i = i+=1;
}
//Change Main Image
var change = document.getElementById(???imgBig???);
change.src = images[i]+???.jpg???;
change.alt = images[i];
}
</script>
On the direct images links, which can be your thumbnails all you need to do is onclick=???imgPresent(i)???, where var i = the number of the file you want inside the image array created in the script. And for your next button the action would be onclick=???next()???. For the previous button the action would be onclick=???prev()???.
Like always, please feel free to contact me or leave me any comments behind or questions,
Thank You,
Gilberto Cortez
