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
Tips & Tricks
JSviewer can be integrated into your web pages in creative ways. This page examines some of the possibilities.
Launching JSviewer in full screen mode
The following HTML code fragment is used to launch JSviewer in its own full screen browser window. Click here to execute this code. In this example, http://www.jsviewer.com/demo is the URL of the directory containing index.html, jsviewer.js, languages.js, spectrum.png and image files.
<a href=demo onclick="window.open('demo','JSdemo', 'fullscreen=1,height='+(screen.availHeight-10)+',width='+ (screen.availWidth-10)+',screenX=0,screenY=0,left=0,top=0,'+ 'toolbar=0,location=0,directories=0,status=0,menubar=0,'+ 'scrollbars=0,resizable=0'); return false">here</a>
Starting slide show at a particular image
If you want to start your slide show at a particular image, you can set the Javascript variable pic to the image you want. Since JSviewer starts counting images at 0, you will need to subtract 1 from the image you want to start at. For example, if you want to start at image 5, you need to set pic=4.
<head> <script src=jsviewer.js></script> <script src=languages.js></script> <script> pic=4 </script> </head>
Stopping slide show from JavaScript
If you want your slide show to stop after the last image, you can create an HTML file to load that does this. The following example illustrates this:
<font face=Arial,Helvetica size=7> <b>The End</b> </font> <script> parent.window.clearOption(parent.window.SLIDESHOW) </script>
Hiding the color bar
If you want to hide the JSviewer color bar, simply delete spectrum.png or set a background image for your HTML page. JSviewer will detect these changes and not display the color bar.
If you are interested in how spectrum.png was created, click here.
Embedding JSviewer into a web page
You can embed a JSviewer slide show into a web page with the following HTML code:
<iframe height=300 width=400 scrolling=no src=demo></iframe>
Making your own CD-ROM slideshows
You can create your own JSviewer slide shows that run from CD-ROM on Windows systems. Simply put the following two files in the root directory of your CD-ROM. The file autorun.inf is used by Windows to run a particular program when a CD-ROM is inserted into a computer. autorun.inf contains the following lines:
[autorun] OPEN=iekiosk.exe index.html
iekiosk.exe starts Internet Explorer in kiosk (full screen) mode with index.html as the default page. iekiosk was written by Russell Herdejurgen.
Adding music to JSviewer slideshows
You can add music to your JSviewer slide shows, however the process is somewhat involved right now. The following example only works with IE at the current time.
First, two frames are created. One holds the JSviewer slide show, and the other is a hidden frame that plays music. The frames are created with the following HTML code:
<html> <head> <title>JSviewer Music Sample</title> </head> <frameset rows=*,0 framespacing=0 border=0 frameborder=0> <frame name=top src=index.html scrolling=auto> <frame name=bottom src=about:blank scrolling=no> </frameset> </html>
One of the images to be displayed is an HTML file instead of a JPEG or GIF image. The HTML file contains the following HTML / JavaScript to launch a WAV audio file:
<html> <title>JSviewer music sample</title> <body bgcolor=black text=white> <table border=0 height=100% width=100%> <tr valign=center><td align=center> <font face=Arial,Helvetica size=7> <b> Play that funky music... </b> </font> </td></tr></table> <script> window.setTimeout('startmusic()',100) function startmusic() { var song=215000 var slides=70 song-=(slides*120) // JSviewer overhead parent.window.timer=Math.floor(song/slides) if (parent && parent.parent && parent.parent.frames['bottom']) { doc=parent.parent.frames['bottom'].document doc.open() doc.writeln('<embed src=funky.wav autostart=true loop=false hidden=true>') doc.close() } } </script> </body> </html>
In this example, the song to play (funky.wav) is 215 seconds long and will play while 70 images are displayed.
Native music support is planned for a future release of JSviewer that won't require a frameset.
Copyright © 2002-2006 Seann Herdejurgen