jClicker guidebook p8

jclicker's jclicker control panel
t h e _jc l i c k e r
how to guide
home | back | slide tray | next |

configuring the slide tray
Remember that we have added a new frame to the bottom of our slide show that allows us to switch between different jClicker slide shows. In this step, we show you how to modify this file to add new slide shows to your collection. We call this the "tray" as it is a means to select from different slide trays like one long ago would load into a carousel slide projector.

For each slide show, you will essentially create a copy of what in the simple jClicker slide show was the file clicker.html except that you will name this file differently for each slide show. So for the template example, with two slide shows, on on the Grand Canyon and the other on Shiprock, we have files and folders set up like:

index.html

open.html

title.html

tray.html

dark.css

light.css

grand_canyon.html

grand_canyon.js

shiprock.html

shiprock.js

clicker_control.js

clicker_functions.js

buttons

images

The files grand-canyon.html and shiprock.html contain the jClicker information for each show. If you examine the HTML source of the shiprock.html file, you will see when we list the image file names, it indicates that they are in the shiprock folder:

ic++;
slides[ic] = 'shiprock/rock1.jpg';
   :             :
   :             :

ic++;
slides[ic] = 'shiprock/north-view.jpg';
   :             :
   :             :

ic++;
slides[ic] = 'shiprock/nw-view.jpg';

Now the remaining step is to look at the HTML for the tray.html file to see how we modfify it to switch slide shows from the bottom menu:

  <!-- start the main tray page content -->
  <BODY bgcolor="#333333" onLoad="write_open()">
  <div align="center">

  <!-- control form -->
  <form name="control">
  <SELECT onChange="load_tray(this.options[this.selectedIndex].value)" name="trays">
  <option value="">Select a slide show...

  <!-- add slide show sets here  
     in format for a slide show file named "jclicker_file.html":     
     <option value="jclicker_file">Slide Show Title</option> 
                                                              -->
  <option value="grand_canyon">Grand Canyon Trek</option>
  <option value="shiprock">Shiprock</option>

  <!-- end of slide show sets     -->

  </select></form></div>

Hopefuly you can see that for each slide show, you need a line between the slide show set comment tags that reads:

  <option value="clicker_file">Menu Title</option>

where clicker_file is the HTML file that contains the jClicker instructions and Menu Title is the text that appears in the menu to idnetify the title of each slide show.

So to add new shows your steps are:

Organize slide files inside the images folder, preferrably in a sub-folder.
Make a copy of any clicker.html file and set up as we do for a single slide show. Give the file a unique name.
Add a new line to the menu form of tray.html file that corresponds to the new slide show.
Make popcorn and enjoy the show!

Next:
Download a copy of the jClicker's jClicker template Go!...