//////////////////////////////////////////////////////////////////////////////////////////////// // // rpViewer - Popup JavaScript Image Viewer // // made by: // Russ Prince 01-11-2004 // // Feel free to use as you see fit. // //////////////////////////////////////////////////////////////////////////////////////////////// rpViewer is a free JavaScript image viewer for people that have lots of pictures on websites but don't want the hassle of over complicated web pages to view them. This package can be used on your current image web pages with very little changes to the original html code. If you're tired of having to hit the back button after clicking on every image then this script is perfect for you. - Russ Prince (01-11-2004) Installation ============ Step 1: Unzip rpViewer.zip into the root of your website Step 2: Test installation by opening http://yourwebsiteaddress/rpViewer/rpViewer_test.html If it opens correctly then you have properly installed rpViewer Usage: ====== rpViewer is fairly easy to use. It just requires a little extra code for each link to an image. Basically it needs an id for the image, and a small bit of code to open the window. Here are a few steps that should work easily in most editors that will allow you to make the changes fairly quickly. Step 1: Open up your htm file for editing. Make sure you can view the code. Notepad works well. Search for: href= If the href= that is found is a link to an image, then replace it with: id='rpPic' onclick='return rpView(this)' href= Example: becomes... Repeat this step until you have altered all image links. It may seem odd that every link has the same id, but the rpViewer code takes care of that when the page is loaded. Step 2: Place this single line at very end (bottom) of your html code: Step 2 (Optional Customizations): There are a few variables you can change to alter the behavior of rpViewer. Add the code below to the bottom of your html file (below the include line shown above) to change any of these options. The values shown here are the default values: Step 3: That's it. Enjoy! How it works ============ The magic here is in the ability for JavaScript to communicate information from window to window. The code that does all of the actual work is in the 'rpViewer.js' file which gets included in all of the pages you have image links on. There really isn't too much that it needs to do other than just keep track of the total number of images, and a counter that indicates what the current image being viewed is. It uses the id tags that you added to each link to determine how many, and the names of each image. (getElementById is an incredibly useful function.) The 'rpViewer_pic.htm' file has a bunch of functions that basically call the functions in the 'rpViewer.js' file to shuffle the counter around, and to get the image names. The 'viewer_buttons.htm' just has a few buttons on it that call a few of the functions in the 'rpViewer_pic.htm' file. Both the 'rpViewer_pic.htm' and 'viewer_buttons.htm' files include the 'viewer_keys.js' code for the keyboard shortcuts to all of the functions in the 'rpViewer_pic.htm' file. - Russ Prince