left round   right round
Photogallery Logo sharing gif
spacer

Home

Earth

Water

Sky

Plants

Animals

Places

 

Other Shots

Newest Galleries

02-07-04
02-08-04
02-25-04

Digicamhelp Link - The digital camera guide for beginners.

The Digital Camera Guide for Beginners

 

Valid HTML 4.01!

Photogallery Tutorial

 


Next you might want to insert a text link in your gallery description paragraph. Insert the following script in code view where you want the link. Of course you’ll need to set the correct path to the page to start the slide show.

<a HREF="javascript:open_window ('image_page_folder/this_gallery/first_image_page.htm')">slide
show</a>

OK now we’re getting somewhere, the last part of the chore is coming up. We need to create the links between the thumbnails and the large image page popups. Open the thumbnail image folder for the gallery. Drag each thumbnail into its container cell. Once you’ve got them all in there click on the first of the series so that it’s highlighted with handles. Now switch to code view. The code for the image will be highlighted and will look like this:

<img border="0" src="images/gallery_thumbs/first_image_sm.jpg" width="125" height="94">

This needs to be changed to this:

<a HREF="javascript:open_window ('image_page_folder/this_gallery/first_image_page.htm')">
<img border="0" src="images/gallery_thumbs/first_image_sm.jpg" width="125" height="94" alt="Alt text for thumbnail image"></a>

Note: Don’t forget the “Alt Text” for your thumbnail.
Go back to design view and save the page. Open the page in your browser and click on the text link to make sure the popup opens and shows the image. OK? If the popup comes up but the “page can’t be found” you need to check the path to the image page. Do the same for the first thumbnail. Is everything working OK? Great, lets get the rest of the links set up. Close out of the browser and go to code view. This is actually the easy part especially if the thumbnails and images have the same names.
Highlight and copy the code you created for the first thumbnail:

<a HREF="javascript:open_window ('image_page_folder/this_gallery/first_image_page.htm')">
<img border="0" src="images/gallery_thumbs/first_image_sm.jpg" width="125" height="94" alt="Alt text for thumbnail image"></a>

Toggle between design and code view highlighting each thumbnail in turn and replacing the original code with the new code. As you do each one change the image page path, thumbnail image name and “Alt Text”.
Save your page and try it out. You’ve got yourself a gallery page with a slide show. When you get ready to create another gallery page you can use this one as a template.

Note: The slide show can be set to start from the first of the series from each thumbnail link or it can start from the relative image page for the thumbnail. If it starts from the relative image remember the “previous image” link can only go back as for as the starting image page.

Want this in PDF? Click on the "PDF Version" link in the right hand menu. Hope this works for you.

Top
 

 
Photogallery Tutorial
Page 1
Page 2
Page 3
Page 4
PDF Version
10x120 spacer
Photogallery - copyright 2003-2004
spacer