|
the new blueprint
The new layout for the jClicker's jClicker is not much different from the previous one. The slide frame displays the images and captions, and the clicker frame controls the current slide show. What we are adding is a third frame, the slide tray , which contains a list of the different slide shows you want to make available.
When a visitor to the site selects a new slide tray from the bottom frame, it loads the appropriate clicker.html file into the middle frame, which in turn, sets up the top frame.
You can use the same set of images and jClicker files that you may have created for a single slide show using our basic template. You will just have to rename the clicker.html and myshow.js file names to be unique for each slide show you add to the "tray."
The first thing you will want to is create a folder/directory to contain your slide shows. You may name it anything that you like. For example, let's call it myshows:
|
NOTE: All of the files are supplied in the template that you will soon download.
|
 myshows
 index.html
open.html
title.html
tray.html
dark.css
light.css
slideshow1.html
slideshow2.html
myshow1.js
myshow2.js
clicker_control.js
clicker_functions.js
buttons
images
Now let's review what each of these files do...
index.html
This is the file that sets up the layout of the frames.
open.html
This file creates the opening screen of your slide show and appears in the slide frame.
tray.html
This file includes a drop down menu that displays the names of the available slide shows. It appears in the slide tray frame. When changed, it updates the file loaded in the clicker frame.
dark.css
light.css
These files are Cascading Style Sheet documents, specifications for formatting the text that appears on the title screen and the slide screens. If you are familiar with CSS, you can easily customize the appearance by editing these text files. If not, just leave them alone! There are two different versions, dark.css and light.css to format slide shows with dark or white backgrounds.
slideshow1.html slideshow2.html
These files are the same HTML as the ones you previously created and named clicker.html and are loaded into the clicker frame. You will have a one file like this for each different slide show in your "tray".
myshow1.js myshow2.js
These files are the same external JavaScript where you customize the template for your slide show as the ones you previously created and named myshow.js and are loaded into the clicker frame. You will have a one file like this for each different slide show in your "tray". It helps to name them in parallel with the files just above.
clicker_control.js
clicker_functions.js
These files contain all of the JavaScript programming code that make it work. There is nothing you need to do with these files, just make sure you have them!
buttons
These are static images used to present the buttons for the jClicker. Leave them alone!
images
This is where you should put all of your slide image files. In the next section we elaborate more on how to organize this.
Next:
Organize your images in a new directory structure Go!...
|
