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

Configuration

JSviewer defaults can be configured in two ways, using cookies or JavaScript variables. Cookies allow you to make global customizations to all JSviewer instances on your website. Variables allow you to make customizations to a single instance of JSviewer. JavaScript variables take precedence over cookies so that you can customize individual instances of JSviewer. The language cookie is a special case and takes precedence over the default language variable.

Setting Defaults

You can set defaults using cookies in your HTML file prior to starting JSviewer. You can set these defaults in your script with the following code:

<head> <script src=jsviewer.js></script> <script src=languages.js></script> <script> setOption(CAPTIONS | CONTROLS | EFFECTS | PRECACHE) controlstyle='rkh' transitiontype='Fade(duration=0.75,overlap=1)' </script> </head>

In this example, image controls are set to rkh, which look like:

JSviewer options are set to CAPTIONS | CONTROLS | EFFECTS | PRECACHE, which means image descriptions are displayed, image controls are displayed at the bottom of the screen, image zooming is disabled, pre-caching is enabled and Internet Explorer transitions are enabled and hard coded to type Fade lasting 0.75 seconds using 100% overlap of images.

Cookies

The following table lists all of the JSviewer options that can be set using cookies or JavaScript variables:

cookie value
controlstyle bmw - alternate image controls
ccd - alternate image controls
mer - alternate image controls
old - previous JSviewer image controls
per - alternate image controls
rkh - alternate image controls, see Setting Defaults for example
fontface Font face used to display text (default=Arial,Helvetica) Fonts are automatically scaled down when the JSviewer window is made too small.
language Default language for all JSviewer pages on website. If you want to set the default language for a single instance of JSviewer, use a Javascript variable instead of a cookie. The value of this cookie is a two character international language code for JSviewer controls. Available languages are:
en - English
da - Danish
nl - Dutch
de - German
gr - Greek
fr - French
it - Italian
es - Spanish
sv - Swedish

options options is a bit mask combining multiple preferences within JSviewer. You can reset JSviewer options by setting the options cookie. You can specify which preferences you desire by separating them with the | character. (default=CAPTIONS | CONTROLS | CONTROLTOP | EFFECTS | PRECACHE | SLIDESHOW | ZOOM)
CAPTIONS display image description/caption
CONTROLS display JSviewer controls
CONTROLTOP display JSviewer controls at top of window
EFFECTS enable IE image transitions
PRECACHE enable imache pre-caching
ZOOM enable image zooming
MAXSIZE display images as large as possible while retaining aspect ratio
RANDOM display images in random order
THUMBS display thumbnail images
LANGUAGES display language chooser if languages.js is loaded
ADVANCED display advanced JSviewer options
HELP display keyboard controls in window
SLIDESHOW start slideshow
DEBUGMODE enable JSviewer JavaScript debugger

thumbdir Thumbnail subdirectory (default=.thumbs)
thumbsize Size of thumbnail images in pixels (default=75) Thumbnails are automatically scaled down when the JSviewer window is made too small.
timer Slideshow delay in milliseconds (default=8000 or 8 seconds)

To set a JSviewer cookie, call the setCookie function after jsviewer.js has been loaded.

<head> <script src=jsviewer.js></script> <script src=languages.js></script> <script> setCookie('timer',3500) </script> </head>

You can set or clear individual options by calling the setOption and clearOption functions. This allows you to individually access some options without having to set all of the options at once using the setCookie function. Below is an example of how to turn on controls and thumbnails while turning off the debugger:

<head> <script src=jsviewer.js></script> <script src=languages.js></script> <script> setOption(CONTROLS | THUMBS) clearOption(DEBUGMODE) </script> </head>

Defaults set using cookies are global to your web site. This means any JSviewer defaults set in http://www.yoursite.com/vacation also set defaults in http://www.yoursite.com/people. This is useful because you can set defaults for your entire web site from the top level page instead of having to put them in every HTML file that calls JSviewer.

Variables

The following table lists all of the JSviewer options that can be set using JavaScript variables only:

variable value
across The number of columns of thumbnails to display. (default=1)
framesok If framesok=1, then the 'full window' link is not displayed when JSviewer is run inside of frames. (default=0)
topMargin
leftMargin
rightMargin
bottomMargin Top/left/right/bottom margins in pixels (default=0)
maxfont Maximum font size in points (default=12)
minfont Minimum font size in points (default=1)
navbarX X pixel coordinate for image controls (default=center controls)
transitiontype IE transition type, for example:
Fade(duration=0.75,overlap=1)
Click here for a list of IE Transitions that JSviewer uses.

To set a JSviewer variable, simply assign a value to it after loading jsviewer.js as shown in the following example:

<head> <script src=jsviewer.js></script> <script src=languages.js></script> <script> fontface='Century Gothic, Verdana' maxfont=10 topMargin=bottomMargin=10 thumbsize=100 </script> </head>