t h e   jc l i c k e r
how to guide
home | back | configuring | next |

configuring the jclicker
The last thing you need to do is to customize the jClicker for your very own slide show. This is done by editing some of the JavaScript code in the myshow.js file. But don't worry if you're worried about having to know anything about JavaScript! All you are doing is editing a text file. We've set up the code so it should be clear as to what exactly you do. You can follow our steps here as well.

NOTE: When editing your myshow.js file, we recommend that you use the basic text editor that comes on your computer, meaning the Windows NotePad for PC users, SimpleText for Macintosh OS 9 and older, or TextEdit for Mac OSX. Other worthwhile (and free) tools include EditPad Lite for Windows, BBEdit Lite for Macintosh.

As a starting point, you can look at the way we set it up in the example template file for the Grand Canyon slide show. We will review the 7 sections that you will need to edit.

NOTE: If you have created a jClicker slide show using our a previous version of our template, you will have to do some copy paste work to update your slide shows. Our newer version does not require you to number the items, making it easier to build, edit, and modify.

(1) SET UP THE SLIDES
The jClicker needs to know three things about each of your slides:

1. The image file name. The jClicker assumes the image files are stored in the images folder.
2. A short text description used on a navigation menu that allows the viewer to jump to any slide.
3. A caption string that is displayed with the image.

The format expected for each slide consists of 4 separate lines of data that are the three items listed above plus an extra line of code ic++; that increments the counter for keeping track of your slide show. The order of each set as listed is the order in which the slide show will run.

ic++;
slides[ic] = 'slide1.jpg';
menus[ic] = 'Slide 1 Short Title';
cap[ic] = 'Slide 1 Caption';

ic++;
slides[ic] = 'slide2.jpg';
menus[ic] = 'Slide 2 Short Title';
cap[ic] = 'Slide 2 Caption';

ic++;
slides[ic] = 'slide3.jpg';
menus[ic] = 'Slide 3 Short Title';
cap[ic] = 'Slide 3 Caption';

    :              :
    :              :

ic++;
slides[ic] = 'fall-colors.jpg';
menus[ic] = 'Autumn Colors';
cap[ic] = 'Autumn Colors on the way down';

ic++;
slides[ic] = 'canyon-walls.jpg';
menus[ic] = 'Colorful Walls';
cap[ic] = 'View of Canyon in Sunset';

ic++;
slides[ic] = 'campground.jpg';
menus[ic] = 'At the Campground';
cap[ic] = 'Entrance to  Campground';

    :              :
    :              :

The ic code in the [ ] brackets is a placeholder for the logical that counts the number of slides. Note also that slide file names, menu titles, and captions must be in single quotes. Avoid using apostrophes (single quotes, e.g. ' ) in your slide titles- if you must have one, it must be preceded with a backslash, \' (the backslash will not appear).

If you ever need to delete a slide, just remove its four lines of code. Likewise, to re-arrange the order, you merely move the four lines to the desired location in the slide show. This makes modifcations very easy!

(2) SET UP THE TITLE PAGE
The jClicker automatically creates a title page for your slide show, with text you provide in this section.

var showTitle = 'text for slide show title';
var showCredits = 'person to credit';

var showTitle = 'Grand Canyon North Rim (1995)';
var showCredits = 'photos by Alan Levine';

(3) SET THE AUTOSHOW SETTINGS
Set the auto_start to true to create a slide show that automatically opens in self running mode.

var auto_start = xxxxx;

var auto_start = false;

var auto_start = false;

You can also specify how long the delay is when the jClicker runs in auto-advance mode. The number entered here is time in milliseconds, so each increment of 1000 represents 1 second of delay time. Note that this is the minimum amount of time between slide advances; the jClicker will not advance until the image of the current slide is fully loaded (shown by the indicator graphic in the bottom part of the jClicker).

var delay_time = xxxxx;

var delay_time = 8000;

(4) SET THE BACKGROUND MODE
The jClicker can display the slides against a light or a dark background, as indicated by this variable. A value of true tells the jClicker to use a light color background and a value of false will result in a dark background for your slide show.

var light_mode = xxxxx;

var light_mode = true;

var light_mode = false;

These settings also tell the jClicker with external Style Sheet to use for the formatting.

(5) SET CAPTION ALIGNMENT
The jClicker can place the captions above the slides, below the slides, to the left of the slide, or to the right of the slide. You specify this using the values defined for cap_align:

• 1 = captions centered above the picture
• 2 = captions to the left of the picture
• 3 = captions to the right of the picture
• 4 = captions center below the picture

var cap_align = X;

var cap_align = 1;

var cap_align = 2;

var cap_align = 3;

var cap_align = 4;

(6) SET THE STARTING SLIDE
By default, a jClicker slide show starts with a title page that is generated based on the configuration in section (2). However, if you want your slide show to start with a specific slide, you can use this area to indicate which one appears first. A typical example would be a long slide show where you recently added a series of images, and you would like viewers to start at the top of the most recent images.

The default value is 0 which tells the jClicker to start with a title page. In the second example below, we have instucted the jClicker to start with slide number 94.

var show_start = X;

var show_start = 0;

var show_start = 94;

(7) OPTIONAL BUTTONS
You can use the next settings the determine whether extra functional buttons appear as part of your slide show controller. All jClicker slide shows have a forward and backward buttons plus a drop down menu for navigation. The buttons you can hide if desired, include:

1. Close Window button
   If you set up the link that opens your slide show to do so in a new browser window, this button provides an easy way for the viewer to exit the slide show and thus see the web site where they had come from previously.
2. Help button
   This button will display a pop-up window with a brief description of how the available buttons on the jClicker work.
3. Resize buttons
   Two buttons that allow the viewer to increase or descrease the size of a displayed image 20% for each click of the button.
4. Autoshow checkbox
   The feature that allows the viewer to see a slide show that advances automatically every few seconds and loops endlessly.

A value of true tells the jClicker to display a button and a value of false will hide it.

var close_button = xxxxx;

var help_button = xxxxx;

var resize_button = xxxxx;

var auto_button = xxxxx;

var close_button = false;

var help_button = true;

var resize_button = true;

var auto_button = false;

(8) SHOW IMAGE FILE NAME
This setting is useful when you are editing and previewing your slide show. Setting a value of true tells the jClicker to append the name of the image file below the caption, so you can track which image is currently in view. When the slide show is complete, return this to a value of false so the image file names do not appear as part of your captions.

var slide_show = xxxxx;

var slide_show = false;

var slide_show = true;

Next:
That is all of the instructions. All you need to do now is to download the most current template file. Go!...