JavaScript Photo Album Viewer

Clean and simple photo album viewer with a next and back button for browsing through the images, the script is completely self contained in a single html file and is easy to edit.

 

My Photo Album

 

Just add the following javascrip to the head section of your webpage

JavaScript <script>

/**********************************************************/
/**   Free script for any use, but please include a      **/
/**   link to stephengriffin.net in any redistribution.  **/
/**                                                      **/
/**   Author : Stephen Griffin, www.stephengriffin.net   **/
/**********************************************************/

function changeImage()
{
    var list = document.getElementById('optionlist');
    document.mainimage.src = list.options[list.selectedIndex].value;
}

function prevImage()
{
    var list = document.getElementById('optionlist');
    if(list.selectedIndex == 0)
    {
        list.selectedIndex = list.options.length-1;
    }
    else
    {
        list.selectedIndex--;
    }
    changeImage();
}

function nextImage()
{
    var list = document.getElementById('optionlist');
    if(list.selectedIndex == list.options.length-1)
    {
        list.selectedIndex = 0;
    }
    else
    {
        list.selectedIndex++;
    }
    changeImage();
}
</script>

 

Then add the following HTML the body section of your web page.

HTML <table align="center" border="0">
<tr>
<td colspan="3" align="center"><img name="mainimage" border="1"></td>
</tr>
<tr>
<td align="left"><input type="button" value="<- Back" onClick="javascript:prevImage()"></td>
<td align="center">

<select id="optionlist" onChange="javascript:changeImage()">
    <option value="photoalbum_files/image1.jpg">First Image</option>
    <option value="photoalbum_files/image2.jpg">Second Image</option>
    <option value="photoalbum_files/image3.jpg">Third Image</option>
    <option value="photoalbum_files/image4.jpg">Fourth Image</option>
    <option value="photoalbum_files/image5.jpg">Fifth Image</option>
</select>

</td>
<td align="right"><input type="button" value="Next ->" onClick="javascript:nextImage()"></td>
</tr>
</table>

 

Any questions or comments, feel free to contact me