JSviewer JSviewer



Click here to launch JSviewer demo.

advanced features
keyboard controls
quick start
source code
tips & tricks

E-mail comments or questions here.

Donations are accepted via



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:

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.


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)
CAPTIONSdisplay image description/caption
CONTROLSdisplay JSviewer controls
CONTROLTOPdisplay JSviewer controls at top of window
EFFECTSenable IE image transitions
PRECACHEenable imache pre-caching
ZOOMenable image zooming
MAXSIZEdisplay images as large as possible while retaining aspect ratio
RANDOMdisplay images in random order
THUMBSdisplay thumbnail images
LANGUAGESdisplay language chooser if languages.js is loaded
ADVANCEDdisplay advanced JSviewer options
HELPdisplay keyboard controls in window
SLIDESHOWstart slideshow
DEBUGMODEenable 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.

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:

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.


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)
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:
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:

Copyright © 2002-2006 Seann Herdejurgen