Templates With a viewer-slideshow.htm

Support for photo galleries with a slideshow image viewer

Adding more gallery pages
Applies only if your template includes a viewer-slideshow.htm page. In this example the template includes 6 gallery pages and 9 images per gallery page. These are the steps to add a new gallery page:

1. Open your current last gallery page. Example: Open the "gallery6.htm". Find the very last gallery image in this page. And see what the slide number is. View sample code. In this sample the number will be 54. If your template includes 6 gallery pages with 9 images per page your number will be 54 as well.
2. Make a copy of the gallery1.htm. Name this gallery7.htm or the last number gallery in your template.
3. Create 9 new full sized images and 9 new thumbnails. Place these in your template gallery folder. (if your gallery has more images you will need to create them as well)
4. Make a backup copy of your "viewer-slideshow.htm". You will now need to list all your new images in the "viewer-slideshow.htm". List your new full sized images after all the existing listed images in this page. You can copy the code and paste it back in the page for your new listings. View code example.
5. You must now edit the links in your "gallery7.htm" page. In step #1 your last image is slide number 54. You will edit the first link in the "gallery7.htm" with "55" for the slide number and "gallery7-1.jpg" for the thumbnail. View sample code.
6. Proceed to the next image in the gallery?.htm and edit this to "56" for the slide number and "gallery7-2.jpg" for the thumbnail. Continue for all 9 images.
7. Open your edited gallery page, click a thumbnail to view an image and cycle through all images in the slideshow to test your editing. If this is not working go through the steps above a second time.

How the gallery is linked to the viewer-slideshow.htm
The link slide numbers in each gallery page (show below) correspond to code rows of images in the "viewer-slideshow.htm". If you add a new row in the "gallery1.htm" you will have to number the new images starting with the number after the last image number for the last image on that page. View sample viewer-slideshow.htm code.

<a href="javascript:ViewImage('1')"><img src="gallery/gallery1-1.jpg" border="0" class="Galborder"></a><br>



Adding a new row of images in a gallery
This can be done, however, adding new rows is not recommended or supported. Below is an outline of how to do this. In this example you will be adding a new row of 3 images to the bottom of a 9 image gallery page for a total of 12 images. You will be editing the "gallery1.htm" page.

1. Make a backup of the "viewer-slideshow.htm" and gallery page you plan to edit.
2. Do steps #1 and #2 on the Adding Another Row support page. Then return and complete the steps below.
3. Create 3 new full sized images and 3 new thumbnails. Place these in your template gallery folder. Name them "Fgallery1-10.jpg" and "gallery1-10.jpg" and 11 and 12 for a total of 6 new images.
4. You will now need to list your 3 new images in the "viewer-slideshow.htm". List your 3 new full sized images after the "Fgallery1-9.jpg" line. You can copy the code and paste it back in the page for your new listings. View code example.
5. You must now edit the links in the new rows in the gallery page. The last image before you added a row was slide number 9. You will edit the new row first link with "10" for the slide number and "gallery1-10.jpg" for the thumbnail. View sample code.
6. Proceed to the next image in the "gallery1.htm" and edit this to "11" for the slide number and "gallery1-11.jpg" for the thumbnail.
7. You must now edit the "gallery2.htm" and renumber the slides. You added three slides. The "gallery2.htm" starts with slide 10 so you must bump this 3 numbers to 13. Bump up all slide numbers in all gallery pages that are numbered after the gallery page you added a row to by 3 numbers if you added a single row.
8. Open your edited gallery page, click a thumbnail to view an image and cycle through all images in the slideshow to test your editing. If this is not working go through the steps above a second time.

Troubleshooting

• If your new thumbnail images are not showing in the gallery: Double check the link and the image name. Did you put your new images in the gallery folder?
• If your images do not show up in the slideshow: Re-do step #4 above.
• If your images do not show up in the slideshow: You have edited your backup copy and not the "viewer-slideshow.htm".
• Red Xs in the slideshow: Double check your image name and the code you added to the "viewer-slideshow.htm" to list your new images. Did you put your new images in the gallery folder?
• You have uploaded and images are not showing see: missing image help.

Setup a separate viewer-slideshow.htm for each gallery
For advanced users: The following modification is not supported, however, below is a quick outline of what to edit to have a slideshow page for each gallery.

• Create multiple "viewer-slideshow.htm" pages. Each will need a unique name.
• Create multiple functions in the "pop-closeup.js", one for each different "viewer-slideshow.htm" you create. Make copies of the function: function ViewImage(data). Each "ViewImage" function you create will need a unique name like "ViewImage2".
• Edit the function for each of the images in your gallery pages to use the function that calls the "viewer-slideshow.htm" for that gallery: <a href="javascript:ViewImage('1')"> would use the new function ViewImage2('1').
• Edit the image list in each "viewer-slideshow.htm". See info above and also see "To setup the images" on the following support page: Setting Up The Gallery Slideshow.

Related Topics:
Detailed Gallery Picture Replacement
Detailed Thumbnail Replacement
Changing Other Pictures in the Template