maricopa center for learning & instruction (mcli) find it from mcli about mcli mcli home

jclicker control panel
t h e   jc l i c k e r
how to guide
home | back | about jClicker | download | next |


what it is
The jClicker is a set of web page files, a few button images, and JavaScript code that will allow you to easily assemble and create a slide show presentation in a web browser. You do not need any knowledge of HTML or JavaScript to create your own slide shows. The jClicker's flexibility allows:

  • playback from a web server or from a local, non-networked computer
  • easy modification of functionality via editing of one text file, no programming expertise needed
  • unlimited number of images
  • one ahead image pre-loading
  • instant jumps to any slide
  • manual or timed automatic slide advance
  • resizable images

If you are eager to get started, skip ahead to the step-by-step guide. To learn more about the jClicker, just keep on scrolling.


what it requires
To view a slide show, the jClicker needs only a JavaScript-capable web browser such as NetScape Navigator (version 6.x or newer is recommended) or Microsoft Internet Explorer (version 4.0 or newer).


using the jClicker
It is easy:

  • Press forward and back buttons to move around in a slide show.
  • To jump to any other slide, select the title from the pop-up menu.
  • Click the "auto" checkbox to turn on or off the automatic slide advance.
  • Click the image resize buttons to increase or decrease the size of an image.

jClicker tools
If you are not comfortable with the manual process of creating jClicker slide shows, a student named David Balding has created a desktop application that makes the process a point and click operation.

You can find the installer (for MS Windows) in the Maricopa Learning eXchange:


some examples
We've created several slide show examples for our own projects:

Below are some other jClicker slideshows created by other folks. If you make use of the jClicker, please send us your URL, and we'll add 'em here. For even more, see what we can quickly find with a little bit of "Googling"


how to guide
Here we show you how to set up your own slide shows using the jClicker and provide some templates that you can download. You will have to edit one HTML file that contains list of slide names and captions. "JavaScript? We don't know no stinkin' JavaScript!" That's okay, no worries! We did all the work for you. You just have to edit the text of one HTML file (and we'll show you exactly what to change). You will need to acquire a set of JPEG or GIF images for your slides.

  1. Planning your show
  2. A bit about frames
  3. Setting up your files
  4. Organizing your images
  5. Configuring the jClicker
  6. Download a template
  7. Linking to your slide show

what's new

  • Version 4.2 (April 2004) By request, a new option allows you to create jClicker slide shows that start automatically as self-running (the auto play box checked).
  • Version 4.1 (January 2004) Added an option in the myshow.js file (show_file = true | false) that displays the image file name under the caption, for use while editing the slide show. If you already use version 4.0, merely download the new jclicker_functions.js file and a sample myshow.js to see where to insert the new option.
  • Version 4.0 (January 2004) has modularized the file structure so that the logical code are 2 separate (.js) files-- this means we can update the functionality of the jClicker. We have added new buttons for changing the size of a displayed image, a button to display a pop-up help window. The author can control which of the optional function buttons appear in their slide show. In addition, we have changed the slide layout code, so that you do not have to manually number the slides, menus, and captions, making a re-ordering of a slide show a cut an paste operation.

    A bit more layout can be modified in the linked style sheets, providing a route to change the slide backgrounds (including using tiled images), the on-screen text, and the box that surrounds the image.

    The "return" button introduced in version 3 has been simplified as only an optional "close window" button (the function of returning was inconsistent across browsers, and "close" seemed more easily understood). Also, due to other JavaScript and browser issues, the html slide option added in version 2.6 has been eliminated- if you want a word slide, make an image of it. Sorry, there is something to be said for going to simpler code.

    And we have now attached the GNU General Public License that clearly marks the free and open rights associated with the jClicker.
  • Version 3.5 (January 2003) cleaned up a small problem that caused the opening screen to be printed twice. Also, to optimize the code again for future updates, all of the JavaScript code to write the bottom controller and the code functions for the jClicker operations were moved to external .js files, again, making the editable files much simpler for the casual coder.
  • In version 3.0 (July 2002), the data settings for each slide show have been moved to an external text (.js) file so that the slide show parameters are separate from the template. This will make it easier to upgrade the template. In addition, the bottom controller has an extra "return" button that will either send the viewier to the page that linked to a slideshow (if it opens in the same browser window) or close the current window (if the slide show is opened in a new window.
  • Version 2.7 (July 2001) cleaned up formating by using external Style Sheets and adds a new parameter so you can specify that the slide show starts at a specified slide image. Oh, and we added some cleaner looking images for the buttons.
  • Version 2.6 (February 2001) added the capability of including any HTML file as the content for a slide. This allows you to include text slides or any other type of media or HTML formatting you can insert into a web page for your slides.
  • Version 2.0 (June 2000) added a graphic that indicates whether images have loaded before jumping to the next slide- this also ensures that in automatic advance mode the jClicker will wait until the current image is loaded. You can also designate the placement of the caption to be above, below, left, or right of the slide image.

going beyond the jClicker
Once you have mastered the basics of creating single slide shows, you may be interested in our next level application, the "jClicker's jClicker". This allows you to combine multiple slide shows into one interface.


We provide the jClicker under a GNU General Public License, so the jClicker costs you a grand total of $0.00! You are welcome to customize the code and the graphic elements for your own use. All that we ask is that you provide credit to our organization, the Maricopa Community Colleges, preserve the copyright below the slide selection menu, and reference this web site, e.g.

We also request that the jClicker not be used to present objectionable content (defined loosely as something you would not want to watch with your mother ;-)

Copyright (C) 2004 Alan Levine
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details

We want people to use and experiment with the clicker. It is new and open to improvement. If you have developed a show you are most proud of, contact us and we'll list you among the examples above.


maricopa center for learning & instruction (mcli)
find it from mcli about mcli mcli home mcli home
The jClicker
Maricopa Center for Learning and Instruction (mcli)
the 'net connection at MCLI is Alan Levine
Questions? Comments? Visit our feedback center
last modified: 6-Jan-04 : 12:01 PM
Maricopa Community Colleges