Opening a picture in a larger window

I had some code that did this, but I've just been playing around on the web - and managed to hammer together something which works even better than my older code. It's done with basic HTML and with Javascript. It's probably easier if I show you an example of how this works - and then we'll talk about how to get it up and running on your pages.

Take a look at this:
http://www.topniche.com/newbie-booster/resources/open-pic-in-new-window/

FEATURES:

You can link to larger pics with thumbs, text, or both.
It actually links to an HTML page right now - but you could just link to the pic.
It's possible to alter the size of the windows / images easily.
There's a "CLOSE WINDOW" button when the pic opens.
You can have as many, or as few pictures as you like.

Here's the page which has all the code you'll need:

http://www.topniche.com/newbie-booster/resources/open-pic-in-new-window/code.html

The easiest way to copy the code is to right mouse click on it and select "copy".

Customizing:

The work is mainly done in the part of the code that calls the image - the second box:

<A HREF="" onclick="openWin('01.html','550','420','Horizontal'); return false"><IMG SRC="images/01-thumb.jpg" WIDTH="149" HEIGHT="102" BORDER="1"></A>

Let me go through this one bit at a time:

<A HREF=""

That should be left the same. Blank.

onclick="openWin('01.html','550','420','Horizontal');

Change 01.html to the name of the page that holds the picture. This is just a regular webpage. If you just want to link to the big pics - use:

onclick="openWin('01.jpg','550','420','Horizontal');

Change 550 and 420 to the size of the window to be opened.

To save time - it might help to make the big pics the same size so that this value would stay constant throught the pics. Play around with the W & H.

<IMG SRC="images/01-thumb.jpg" WIDTH="149" HEIGHT="102" BORDER="1">

This is just the thumbnail which will form the link. There's nothing special about this code - whether you use an image here or a text link is up to you.

You might also like to edit the larger picture page code (The final box) - to fit in with the colors on the rest of your site.

So there it is - let me know if you have problems!

TOM ^"^

Enter TOM'S NEWBIE BOOSTER

">

---