America's Town Square
More Free Stuff

A Universal Large Graphics Viewer

A Free Link to Your Graphics Display Page, What is a Large Graphics Viewer?,
Server Side Includes, The Ugly Details, A Perl for Every Page,
Bring it all Together, Download widgets.pl now, Example applications, Epilogue

A free link to your graphical display page.

If you decide to use this scheme to display your graphics, please let us know where and how and we'll include a description of your use and a link to your page.

What is a Large Graphics Viewer?

Don't know about you, but hate waiting for large graphics to download. A more humane scheme is to display a thumb-nail clickable and give the viewer the option to see essentially the same image in all its glory. The disadvantage with the concept, up until now, was a new HTML document for each expanded image.

The concept with a universal image displayer is to pass a Perl script the information which varies from image to image -- such as the title and actual graphic file name -- and then have the Perl script generate the HTML document "on the fly."

First a word of caution.

You must have access to Common Gateway Interface (CGI) scripts.

Before you get carried away with creativity, check with your Internet Service Provider as see if they allow cgi scripts in general. While you're at it see, if they allow server side includes (SSI), they are handy for all sorts of good things like Random Widgets

The Ugly Details

 The heart of the scheme is the calling link. It's a normal link with a "query string" added at the end. A query string is normally appended to the end of a URL with you click on a form's submit button. It takes the form: URL?name1=value1&name2=value2 and so on. The query starts with a required "?" followed by a series of name value pairs. When you click on a form's submit button, the query string is inserted by your browser. Nothing saying we cannot do it manually. Let's look at an example.

I use a Perl script called big-pic.pl. It is in a directory called cgi-bin. A thumbnail graphic is actually a link. It might look like the following: 

<A HREF=
   "http://www.iloveac.com/cgi-bin/big-pic.pl
   ?NAME=top-light.jpg&TITLE=Top_of_Lighthouse_in_1869">
<IMG BORDER="4" HEIGHT="105" 
   WIDTH="156" ALIGN="LEFT" SRC="graphics/s-top-light.jpg"></A>
The quoted part of the URL must all be on the same line.

The first part of the URL is a conventional path to your script. The part following the "?" is the information to be passed. In this case there is the name of the large graphics file and the title of the picture. A URL cannot contain blanks so I substitute underscores "_" for blanks and replace the underscores with blanks in the script. The name of a field is case sensitive. Use whatever case you choose but make sure the cases in the URL and in the script are exactly the same.

A Little Perl for Every Page

You can display the actual Perl script with the link below. You can then save it to your local computer. First, a few comments.

require "cgi-lib.pl"; # Standard Perl library

is a standard Perl library. It should be on your system, if not see the Webmaster's Virtual Bookcase.

There are a group of system-dependent variable at the top of the script, they include: 

# The following should be changed to reflect your setup.
$TourDirectory = "actour"; # The path of the original calling page
$DefaultExtension = "html"; # Extension of HTML documents
# The path to the big graphic, relative to the cgi directory.
$PicturePath = "../$TourDirectory/graphics";
# The path to the calling document, relative to the cgi directory.
$ReturnPath  = "../$TourDirectory";

See the actual script if you want to have an array loaded with return values based upon the name of the calling file.

The script generates an HTML page between the statements:

print <<HTML;

HTML

This section can be change until your hearts content. The only difference between this HTML and conventional HTML is variable substitution. The statement:

<TITLE>$Title</TITLE>

substitutes the value contained in the variable $Title. There are several variable replacements. A variable in Perl begins with a "$".

Bringing it all Together

Lets bring it all together. Take the following steps:
  1. Create a thumbnail and large graphic file for each picture.
  2. Transfer big-pic.pl to your cgi directory. (If you first transfer it to your PC, make sure it's in Unix format in your cgi directory. (Edit the file and back up over the DOS end of file marker.)
  3. Make it executable by entering chmod 755 big-pic.pl (775 on some servers) at the Unix prompt while the directory containing big-pic.pl is your working directory.
  4. Insert the link to the Perl script, including the query string, in your HTML document as shown above.
  5. Test the script.

Download the Perl Script big-pic.pl

Click on the next link to display big-pic.pl. If you want to save it, drop your browser's File menu, select Save As, and pick a directory on your PC.

Download widgets.pl now

Epilogue

I would appreciate any feed back you care to offer on this tutorial. Don't forget to let me know if you used the graphical viewer so we can give you a free link. Also, let me know what else you would like to see on these pages.

Thanks,
Urb LeJeune president America's Town Square.

Graphical Viewer Examples

The Atlantic City Virtual Tour Lighthouse Page has three thumbnail pictures which are links to large version of the same picture.

I Love Atlantic City Online has a fish eye view of Atlantic City which can be blown up.

Please subscribe to the free ATS Newsletter so we can keep you
up to date with our "free stuff", special offers, and other goodies.

Back to the ATS Home Page

Please sign our self-updating guestbook

How about some free stuff from ATS?

Please send our crotchety Webmaster some mail.
Copyright ©1996 America's Town Square
15 Hunter Drive
Tuckerton, NJ 08087
(609) 294-0320 [an error occurred while processing this directive]