Highslide JS, the open source JavaScript thumbnail viewer was created by Torstein Hønsi.

definition of javascript: A scripting language developed by Netscape to enable Web authors to design interactive sites. Although it shares many of the features and structures of the full Java language, it was developed independently. Javascript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content. JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license. It is supported by recent browsers from Netscape and Microsoft, though Internet Explorer supports only a subset, which Microsoft calls Jscript.





click to see finished file

*note that the main.css file and the thumbnail and large images in the "images" folder are my files for this demo example.

To make this viewer work you must copy the following folders to your own site folder, specifically where you want to use the viewer, you will need:

1. the graphics folder
2. the css folder(keep the folder name lower case) which contains highslide.css to your own folder where you want to use this viewer.
3. and the js folder (contains highslide.js)

DO NOT change the folder names of any of the 3 folders! Make sure the highslide.css is in a folder called exactly: css. There is JavaScript code in the highslide.js file that references the exact file names and the viewer will not work if the file names are changed!

1. For the demo today copy the entire folder to your InClass folder
2. When implementing it for your Portfolio site, copy the css folder, graphics folder and js folder to your own folder wher you are going to use it.
3. On the page where you want to have the gallery, add this code to the head tag:
   
   <script type="text/javascript" src="js/highslide.js"></script>
   <link rel="stylesheet" type="text/css" href="css/highslide.css" />
   
   <script type="text/javascript">
   hs.graphicsDir = 'graphics/';
   hs.wrapperClassName = 'wide-border';
   </script>
   
   
4. Insert the small thumbnail image into the div: thumbWrapper
5. Then select the small thumbnail and link it to the large image (in the Properties).
6. Go to the source code and in the "a href" tag add the code below that is in red. Make sure you do this in the link element, not the image source element.
7. If you want a caption add the code in purple after the ending </a> tag, just add your own caption for your artwork. The highslide-caption class can be found in the highslide.css file. Add the text in red and purple but put your own caption.
   
   
   <a href="images/1_lg.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/1_sm.jpg" alt="Skull" title="Click to enlarge" width="100" height="100" /></a><div class="highslide-caption">Skull by Liz King</div>