Creating a Slideshow for Your Pictures

After three weeks of collecting interesting pictures for the course, the picture page of my website was starting to get pretty cluttered. I needed a neat new way to organize and present all of my new photos in a way that was a bit more visually acceptable, so I turned to JavaScript to display my images in a serial slideshow format. Luckily for a newbie like me, this process was surprisingly easy. The first step I had to take was “preloading” the images. The concept of preloading is to load all the images before the slideshow even begins to limit viewer wait time in between slides. Basically, I just added a header for JavaScript and named each one of my images with the following code:

<script type= “text/javascript”>


var image1= new image()

image1src.= “project1/ChurchEditedFinal.jpg”

var image2=new Image()


Just continue this code until you’ve accounted for all of your images. For the next step, I had to implement the code to run the actual slideshow. You’ll only have to list out the name of your first image in the show and then create a function that I named “display_slideshow.” What this does is replace the current image with the following image until all of the images have been displayed, and then it will repeat. Each image is displayed for 2.5 seconds. This is indicated by the code “setTimeout (“display_slideshow()”), 2500.” The code is listed in detail below to help you along the way:

img src= “ChurchEditedFinal.jpg” name=”show”/>



var index=1

function display_slideshow(){

if (!document.images)


if (index <15)









Once you’ve got your code all down, just upload it to your website. Refresh your page, sit back and watch your pictures smoothly slide across the screen with no clicking or scrolling needed. To watch my show in action, check out my new updated picture page:


– Natalie Russell

~ by Madame Psychosis on September 24, 2012.

%d bloggers like this: