Image Gallery With Description - Source Code - JsMadeEasy.com

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Image Gallery With Description
Click on the buttons to view the pictures in my galery. This script is kinda tricky. It involves changing a lot of values depending on how many images you have. First, I will explain the script.Then you need to adjust the numbers that are in bold green according to how many images you have. This example has 6 images.



Insert into <HEAD>
<script language="JavaScript"> <!-- Hide from old browsers var indI = 1; images = new Array(); images[1] = "1.gif"; images[2] = "2.gif"; images[3] = "3.gif"; images[4] = "4.gif"; images[5] = "5.gif"; images[6] = "6.gif"; descript = new Array(); descript[1] = "YOUR FIRST DESCRIPTION"; descript[2] = "DESCRIPTION2"; descript[3] = "DESCRIPTION3"; descript[4] = "DESCRIPTION4"; descript[5] = "DESCRIPTION5"; descript[6] = "YOUR LAST DESCRIPTION"; function gallery() { if (indI == 1) { document.getElementById("desc").value = descript[1]; document.getElementById("previous").value=" "; } } function previmg() { if (indI != 1) { indI--; document.getElementById("img1").src = images[indI]; document.getElementById("desc").value = descript[indI]; document.getElementById("next").value = "Next"; } if (indI == 1) { document.getElementById("previous").value = " "; } } function nextimg() { if (indI != 6) { indI++; document.getElementById("previous").value = "Previous"; document.getElementById("img1").src = images[indI]; document.getElementById("desc").value = descript[indI]; } if (indI == 6) { document.getElementById("next").value = " "; } } function pickrand() { var imagenumber = 6; var randomnumber = Math.random(); indI = Math.round((imagenumber-1) * randomnumber) + 1; document.getElementById("img1").src = images[indI]; document.getElementById("desc").value = descript[indI]; if (indI == 1) { document.getElementById("previous").value = " "; } else { document.getElementById("previous").value = "Previous"; } if (indI == 6) { document.getElementById("next").value = " "; } else { document.getElementById("next").value = "Next"; } } function firstimg() { indI = 1 document.getElementById("img1").src = images[indI]; document.getElementById("desc").value = descript[indI]; document.getElementById("previous").value = " "; document.getElementById("next").value = "Next"; } function lastimg() { indI = 6 document.getElementById("img1").src = images[indI]; document.getElementById("desc").value = descript[indI]; document.getElementById("next").value = " "; document.getElementById("previous").value = "Previous"; } // -- End Hiding Here --> </script>

Insert into <BODY>
<body onLoad="gallery();"> <IMG id="img" SRC="YOUR FIRST IMAGE" name="img" border=0> <form name="gallery"> <input type=text value=" " name="desc" size=34><br> <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>

Other Options
An example is: <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="gallery();"> or <body onLoad="gallery();"> Now put this where ever you want in your HTML document <IMG SRC="YOUR FIRST IMAGE" name="img" border=0> <form name="gallery"> <input type=text value=" " name="desc" size=34><br> <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> Now you need to change all the images, there should be 7 changes with this example. To add more images you would just insert this line after the ones in the script that goes in the head tag that look exactly like it. images[7] = "IMAGE7" AND descript[7] = "DESCRIPTION7" Then you ned to adjust the number 6 to 7