WeekendClimber.Com © - Slide Show Javascript

The New Slideshow 1.7 Setup

Written by weekendclimber

Wednesday, 05 April 2006

Article Index
The New Slideshow 1.7 Setup
The Variables

Page 1 of 2

This tutorial is for setting up version 1.7 of our slide show program that we use on WeekendClimber.Com, for use on your website. The newest version of our popular slide show program now has a little help with the new version of our website. We have taken the time to create this page, so that setting up this little gizmo is even easier. If you know some HTML, and you can cut and paste, setting this up should not be a problem by following the instructions on this page. Make sure to read these instructions thoroughly as we have added new features and changed some of the variables. Most problems can easily be solved by using this article as a base knowledge of how the script works. If all else fails log onto the 'BetaBoard' from the link to the left and post a question to the help forum. Enjoy

Setting Up Pictures

Anyway, your probably ready to get started. First, when creating your pictures and thumbnails you should name them exactly the same except for their extensions. Also, since the program cannot determine the sizes of your images it is also best to make the thumbnails and original images the same size, respectfully. Naming the images the same, excluding the extensions, allows for two different formats of pictures to help speed the loading of the slide show page. If the thumbnail and picture extensions are the same, just add a little bit of text to the end of the thumbnails' names (ie: large picture: picture1.jpg; thumbnail picture: picture1_th.jpg). These will become the values of the `imgExt' and `thExt' variables explained later.

Starting the HTML

Next, and you'll need your text editor for this, you will need to create your own basic HTML page (our use one of your site's templates) and add an `onload' attribute value within the `body' tag (this is the layer creation function). Then, insert an `img' tag with an `id' attribute with the value of `picture', as such:

<HTML>

<HEAD>

<TITLE>Slide Show</TITLE>

</HEAD>

<BODY ONLOAD="createLayer();">

<IMG ID="picture" src="/my/first_picture.jpg">

</BODY>

</HTML>

One thing that you will need to keep in mind is that the program does not make any distinction between the sizes of pictures and thumbnails. You will need to create your pictures and thumbnails, then design your main picture display page to accommodate for this limitation.

Adding Picture Descriptions

A new feature to this latest version of our slideshow program is the ability to have descriptions be displayed on the same page when you click on a thumbnail for displaying the original image. This makes it simple to have a nice paragraph about where the photo was taken and how, or just to poke fun at someone in the image. To do this, simply add a division with an 'id' attribute with a value of 'picDesc' as in the following sample:

<div id="picDesc"></div>

If you do not wish to use this feature you can easily disable it by commenting out line 129 in the javascript file. This line be disabled by adding two double-slashes ("//") in front of it, like so:

//document.getElementById('picDesc').innerHTML = imgDesc[index];

Thumbnail Toolbar

In order for a user to select a picture you will need a selection of thumbnail images representing the full-sized images. This is where the usefulness of the latest version of our program comes into perspective. In version 1.7, the first set of thumbnails are generated directly from the program and all that is needed is a division to place them in. In particular, a division with an 'id' attribute with a value of 'thFrame'. Use the following code to create a division that will hide any undisplayed thumbnails:

<div id="thFrame" style="position:relative; overflow:hidden;...

width:640px; height:68px; white-space:nowrap; margin:0px;...

padding:0px;"></div>

You will most likely need to change the width or height amounts that I have used in the style declaration, but this should be fairly obvious. Also, you can certainly modify the style code to accommodate the addition of the new division into your existing website, but some of the style values a needed to create the effect of scrolling within a frame (Note: the '...' is just used to show that the line continues).

Sliding the Thumbnails

In order to slide through each of the individual thumbnail pictures, create two links (prev and next or up and down). Each link will need to be setup with some special `href' attribute values as is shown here:

<A HREF="javascript:slideIt('right');">PREV</A>

<A HREF="javascript:slideIt('left');">NEXT</A>

For those of you utilizing the new vertical orientation included in this latest version, you will want to the text 'up' and 'down' in place of 'right' and 'left' between the parenthesis.

Prev PageNext Page >>