FrontPage 2003 - graphics

[Guest]

I would like to make a page with a group of thumbnails (kind of like in a
table view - 5 rows, 4 columns). Then, I would like a user to be able to
click on the thumbnail and get passed to a full copy of the picture. I was
able to create the thumbnail and I saved the page (saved the embedded file),
but I don't get passed to the larger image. What am I doing wrong. Thanks
much in advance!! Ellen

 

[Trevor Lawrence]

I would like to make a page with a group of thumbnails (kind of like in a
table view - 5 rows, 4 columns). Then, I would like a user to be able to
click on the thumbnail and get passed to a full copy of the picture. I
was
able to create the thumbnail and I saved the page (saved the embedded
file),
but I don't get passed to the larger image. What am I doing wrong.
Thanks
much in advance!! Ellen

Do you mean like this
http://tandcl.homemail.com.au/gallery.html

I coded this using HTML/JavaScript. There are other ways to do it, but if
you like this set up, I will extract the relevant code. Unfortunately some
of it is a bit of overkill, so it needs simplifying somewhat.

 

[Charles W Davis]

How did you create the thumbnail? The method that I use is to insert the
"full" copy of the pictue and then click on the AutoThumbnail icon on the
Picture tool bar. When you save the page, two images will be saved to your
images folder.

 

[Guest]

Hi Trevor - Thanks for responding!! Yes - that is exactly what I want to do.
But, when I clicked on your pictures, they didn't "enlarge". Same problem I
had trying to do mine. Any suggestions?

 

[Guest]

Hi Charles - Thanks for the response! I did the same. Used the insert
picture and then Auto Thumbnail. I believe two images were saved to the
images folder, but when I click on the thumbnail, no larger picture appears.
Just as I asked Trevor -- any suggestions would be appreciated. Ellen

 

[Trevor Lawrence]

Hi Trevor - Thanks for responding!! Yes - that is exactly what I want to
do.
But, when I clicked on your pictures, they didn't "enlarge". Same problem
I
had trying to do mine. Any suggestions?

Very odd

I know there are some errors on my site, but I just clicked on the link in
my post in this newsgroup and it opened the site. Left clicking on a picture
brings up a larger image. It is not huge, simply the size I saved it as.

To answer the previous question, I created the thumbnail using IrfanView, a
free program at www.irfanview,com

Each image has code to call JavaScript to open the image at its actual size.

There are a few bells and whistles in the code, but I can try to cut this
down to its simplest and post it, perhaps tomorrow (i.e. about 18-20 hours
from the time in this post)

 

[Guest]

Ah ha Trevor - found it. I went back to your page because I was sure it
worked the way you said it does .. so I was determined to find out why didn't
it work for me. I have pop-ups blocked. Once I allowed the pop-ups, I was
able to click on an image and voila! it was the enlarged picture. I would
appreciate seeing your 'cut down' version of the code.

Thanks again Trevor!! Ellen

 

[Trevor Lawrence]

Ah ha Trevor - found it. I went back to your page because I was sure it
worked the way you said it does .. so I was determined to find out why
didn't
it work for me. I have pop-ups blocked. Once I allowed the pop-ups, I
was
able to click on an image and voila! it was the enlarged picture. I would
appreciate seeing your 'cut down' version of the code.

Thanks again Trevor!! Ellen

Great, Ellen

And good timing. I have just finished it and tested it

I placed all the code on:
http://tandcl.homemail.com.au/testgall/

The test page is http://tandcl.homemail.com.au/testgall/testgall.html

This displays a thumbnail
http://tandcl.homemail.com.au/testgall/images/trevor_t.jpg

When the picture or text is clicked, Javascript inside testgall.html opens:
http://tandcl.homemail.com.au/testgall/pictures.html
passing to it these parameters
"?picture=images/trevor.jpg&caption=Trevor&height=500&width=500"

These are read by the Javascript inside pictures.html and a new page is
opened, displaying http://tandcl.homemail.com.au/testgall/images/trevor.jpg

So the code you need is
http://tandcl.homemail.com.au/testgall/testgall.html
http://tandcl.homemail.com.au/testgall/pictures.html
[Many thanks to those whose code I have amended a bit, mainly Steve Easton
and Jim Cheshire}


The images you need are
http://tandcl.homemail.com.au/testgall/images/trevor_t.jpg
http://tandcl.homemail.com.au/testgall/images/trevor.jpg
(or actually your own images - these are just test pictures of me taken
several years ago, when I was a bit less ugly than now)

The heart of the code in testgall.html which you need to change is:
<table>

<tr>
<td>
<a href='nojsmess.html' target="_self"
onclick="newWindow('images/trevor.jpg','Trevor');return false;">
<img src="images/trevor_t.jpg" alt="" title='Click to see a larger
picture' /><br />
Click to see a larger picture
</a>
</td>
</tr>

</table>

Just add new cells to this table for each picture, changing the image names
and the captions

nojsmess.html is just a small .html file containing a message when
JavaScript is not present. All it needs in the <body> is
<h3>This site requires Javascript enabled</h3> .
The code works without it (provided JS is present).

You will need to do some cutting from the code on my site (View Source in
IE) and pasting it to your site (using Code or HTML view) to place this code
where you need it. Please get back if you need help with this

--
Have fun,
Trevor Lawrence
Canberra
Microsoft MVP - FrontPage
MVP Web Site http://trevorl.mvps.org