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

Leave a Reply

Your email address will not be published. Required fields are marked *