JavaScript Image Gallery Code

JavaScript code that allows the user to view the image in the gallery. It can add an unlimited number of pictures as you like. It has features including the previous page, next page, first page, last page, and random selection. This script is very suitable for display of your favorite pictures on the site to your friends. Use it to display product images on the site which is also a good choice.

Copy and paste the code into your web page file in the head tag and body tag.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">
<!-- Hide from old browsers


    var i = 1
    images = new Array
    images[1] = "YOUR FIRST IMAGE"
    images[2] = "IMAGE2"
    images[3] = "IMAGE3"
    images[4] = "IMAGE4"
    images[5] = "IMAGE5"
    images[6] = "YOUR LAST IMAGE"

function gallery(){
    if (i == 1){
        document.gallery.previous.value="       "}
}
function previmg(){
    if (i != 1) {
        i --
        document.img.src = images[i]
        document.gallery.next.value = "Next"}
    if (i == 1) {
        document.gallery.previous.value="        "}

}

function nextimg(){
    if (i != 6) {
        i ++
        document.gallery.previous.value="Previous"
        image = images[i]
        document.img.src = image}
    if (i == 6){
        document.gallery.next.value="    ";}
}

function pickrand(){
    var imagenumber = 6 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
    var randimage = images[rand1]
    document.img.src = randimage
    i = rand1
    if (i == 1){
        document.gallery.previous.value="        ";}
    else {
        document.gallery.previous.value="Previous";}
    if (i == 6){
        document.gallery.next.value="    ";}
    else {
        document.gallery.next.value="Next";}
}

function firstimg(){
    i = 1
    document.img.src = images[i];
    document.gallery.previous.value="        ";
    document.gallery.next.value="Next"
}
function lastimg(){
    i = 6
    document.img.src = images[i];
    document.gallery.next.value="    "
    document.gallery.previous.value="Previous"
}
// -- End Hiding Here -->
</script>

Insert this code into <body> tags

<IMG SRC="YOUR FIRST IMAGE" name="img" border=0>
<form name="gallery">
<input type=button value="Previous" name="previous" onClick="previmg();">
<input type=button value="First" name="first" onClick="firstimg();">
<input type=button value="Random" name="random" onClick="pickrand();">
<input type=button value="Last" name="last" onClick="lastimg();">
<input type=button value="Next" name="next" onClick="nextimg();">
</form>

Instruction:

Important:

Add images[x] = "IMAGEx" with number for your image, follow the consecutive numbers, 2, 3, 4, 5, 6, 7, 8...
Change "6" with your numbers of image or last image(if your last number is you sum of image).

Replace <body> with <body onLoad="gallery();">
Remember to change "YOUR FIRST IMAGE" url, it will display to your visitor first.

Webmaster » Web Programming » JavaScript » Image Effects » Image Gallery Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links