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 2 of 2

Editing the Javascript

Now, with the main picture, description division, thumbnail division, and right and left (or up and down) links placed on your page, it's time to setup the javascript variables in the program. Be careful here, most of these have changed since the prior version of the program. Open up the slide show script in your text editor and edit the variables' values according to the following descriptions:

Variable: direction
Value: this will be either the text 'horizontal' or 'vertical' depending on how you want the thumbnails to scroll on your page.

Variable: thImgWdth
Value: this is equal to the width of your thumbnail images (best to have all be the same width.

Variable: thImgHght
Value: this is the same as the height of your thumbnail images

Variable: thExt
Value: this is the extension given to all thumbnail images

Variable: thDir
Value: this is the text string of the directory where you thumbnail images are placed (note: follows same rules as the pic_dir variable notes).

Variable: imgExt
Value: this is the extension given to your full-sized pictures (ie: .jpg, .gif, etc.).

Variable: imgDir
Value: assign the text string of the directory where your full-sized pictures reside (note: make sure there is a trailing slash `/' and we've always used paths relative to the script).

Variable: thNum
Value: make this equivalent to the number of thumbnail images used on your page.

Variable: scrSpd
Value: increase this to make the thumbnails Move faster, or decrease it for the opposite affect.

Variable: sldrPos
Value: this is used to set the stylesheet attribute 'position' for the sliding thumbnail layer, check a CSS reference chart at www.w3schools.com for possible values. Default of 'relative'.

Variable: sldrTop
Value: this can be used to change where the top of the sliding thumbnail layer will be displayed. Negative values will move the layer up, positive values will move it down.

Variable: sldrLft
Value: this can be used to change where the left side of the sliding thumbnail layer will be displayed on the page. Negative values will move the later to the left, and positive values will move it right, on the page.

Variable: oldHtml
Value: set this to an optional page for browsers that cannot use the javascript in this program. Though rare, they will not be able to use this slideshow program in their browsers.

Combining the HTML and Javascript

Once the variables have been edited according to your needed setup, upload the javascript file to your server and remember the location of where you have placed it. Now, we need to once again edit your html page that will utilize the script. First, we need to declare the names of the images using the javascript array 'imgTxt' which will be added within the `HEAD' section of your HTML document. Also, if you are using the descriptions feature, you can add a second array that holds these descriptions, called 'imgDesc'. Also, we need to add a little line to point to the script, like such:

<HEAD>

<SCRIPT TYPE="text/javascript">

var imgTxt = new Array ("pic1", "pic2", etc... );

var imgDesc = new Array ( "desc1", "desc2", etc... );

</SCRIPT>

<SCRIPT TYPE="text/javascript" SRC="/path/to/slideshow.js">

</HEAD>

It is very important the the declaration of the javascript file comes after the declaration of the two arrays that holds the picture names and descriptions. These arrays are used in the program, so if they are declared after the javascript file is loaded, an error will occur, and that makes everything rather unpleasant.

Putting all together

Now that everything has been pieced together you should be able to load up the page and test it. Make sure that both the thumbnail scrolling works and that the full-size images and the descriptions load after clicking the appropriate thumbnail image. Now that you have setup the script, it's even easier to add additional slide show pages. Just add the two script tags (one to declare the `imgTxt' and 'imgDesc' arrays and the other to point to the source script) into the `HEAD' section of the new page, add the `onload' function to the `body' tag along with the thumbnail and description divisions. This should make it real easy to add new slideshows whenever you snap new pictures and want to share them.

Climbing

Check Out

Community

Programming

Misc

Login

Events

Site Stats

Sections

Climbing.Com Flashes

Who's Online

Latest Trips

Editing the Javascript

Combining the HTML and Javascript

Putting all together