JSviewer - Dynamic HTML JavaScript slide show

JSviewer JSviewer

Click here to launch JSviewer demo.
home
browsers
features
advanced features
keyboard controls
quick start
configuration
source code
thumbnails
tips & tricks
samples
download

E-mail comments or questions here.

Donations are accepted via

Quick Start

You can create your own slide show using JSviewer right now. Click on the button below to get started. When you add pictures, the text area below will contain entries for your slide show in the format that JSviewer expects them in.

Once your slide show is working, you can save it to your computer by viewing the source and saving it. You will need to save copies of jsviewer.js and languages.js in the same directory.

Slideshow template

The following HTML template is all you need to modify to create your own slideshow:
<html> <head> <title>JSviewer Photo Gallery</title> <script src=jsviewer.js></script> <script src=languages.js></script> <noscript> <font face=Arial,Helvetica color=red><b>You need to enable JavaScript to view these pages.</b></font> </noscript> </head> <body bgcolor=black text=white link=yellow alink=orange vlink=red> <div id=data style="position:absolute; visibility:hidden"> <form> <select name=pictures> <option value=";<center><big>Welcome to JSviewer Demo<p>For more information, visit <a href=http://www.jsviewer.com/>www.jsviewer.com</a></big></center>"> Welcome <option value="dallas.jpg;Dallas skyline"> Dallas skyline <option value="coastgate.jpg;The Golden Gate Bridge from the Pacific coast"> Golden Gate Bridge <option value="brooklyn.jpg;The Brooklyn Bridge"> Brooklyn Bridge <option value="timesquare.jpg;New York City Times Square"> Times Square <option value="uptown.jpg;Uptown Manhattan from the top of the World Trade Center"> Manhattan from WTC <option value="centralpark.jpg;Central Park"> Central Park <option value="statueflag.jpg;American Flag behind Statue of Liberty"> American Flag <option value="guadalupe.jpg;Guadalupe River in New Braunfels, Texas"> Guadalupe River <option value="tucson.jpg;Sunrise over Tucson, Arizona"> Tucson sunrise <option value="whitney.jpg;Sunset over Lake Whitney, Texas"> Lake Whitney sunset <option value="sunset99.jpg;This is the last sunset of the millinium taken on 12/31/1999"> Millinium sunset <option value="http://www.google.com/;Google"> Google <option value="http://www.yahoo.com/;Yahoo"> Yahoo <option value="http://www.google.com/images/logo.gif;Google"> Google Logo </select> </form> </div> </body> </html>
This is the HTML source code for the JSviewer demo. This code defines all of the images and web pages that are displayed by JSviewer. Each image or web page is defined with an <option> tag as follows:
<option value='URL;long description'> short description

The URL can be an image file name, a web page or be completely empty. If you leave the URL empty, only the long description is displayed on the screen. The first option line in the HTML template above gives an example of this. URL's can be relative to the current directory or fully qualified like http://www.google.com or http://www.google.com/images/logo.gif. You can include any number of images or web pages you desire. You can change the <title>, <body> and <option> tags to match your preferences. Do not modify any other lines or JSviewer may fail to work. You can change background and text colors in the <body> tag.

Now that you have created your own slide show, learn how to configure it.