Creating More Slide Shows

Adding more slideshows in basic version single slideshow templates

Second slideshow
Creating new slideshows with a different group of pictures in non-jQuery, non-Lytebox website template models.


#1: Copy page:
Open the website folder and look for the "slideshow.htm". Copy and paste it so you have a second .html document. Rename it, for example to "slideshow-2.htm".


#2: Edit slides to display:
Edit the slide image list to display a different set of images in your new page "slideshow-2.htm". Open the new page and look for the following code:

<!-- EDIT THIS AREA TO ADD AND REMOVE PICTURES FROM THE SLIDESHOW -->

The lines that follow the above line tell the "slideshow.htm" what pictures to display in the gallery folder. Delete any lines you don't need. Change the names of the .jpg images in the list.

Change the "starting" slide. Look for the following code:

<img src="gallery/Fgallery1-1.jpg" name="show"><br>

Change the .jpg name to the name of the image you want the slideshow to start with.


#3a: Link the new slideshow (Option A):
Adding links may be tricky. Open the "menu-gallery.js" (or .js file with a similar name) in Notepad and look for the following lines. Your template may not include a "menu-gallery.js". If not, see the next step for linking:

Note: The link in the "menu-gallery.js" may include 1, 2 or 3 lines of code for each link. Copy all the lines as grouped and paste them.

document.write('<td class="hidemobile">');
document.write('<a href="slideshow.htm" class="menu-gal">Slideshow</a>');
document.write('</td>');

...or if your template uses popups for the closeups the link will be the following:

<a href="javascript:popUpSlideshow(\'slideshow.htm\')">Slideshow</a>

Copy the above 1, 2 or 3 lines and paste it below itself. Edit the text, highlighted in red, to link to your newly created "slideshow-2.htm". Edit the text "Slideshow" with your new link name.


#3b: Link the new slideshow (Option B):
You can create a text link in any of your HTML pages using the code below:

<a href="slideshow-2.htm">Slideshow</a><br>

...or if your template uses popups for the closeups the link will be the following:

<a href="javascript:popUpSlideshow('slideshow-2.htm')">Slideshow</a><br>

Edit the text in red to whichever slideshow you want to link to.


Link not working:
If you do the above editing for a popup link, and the link is not working. Your template may not include popup code, or if you believe it does, make sure the HTML page has the following line of code in the head section of the webpage, just above the </head> tag.

<script type="text/javascript" src="pop-closeup.js"></script>

Or it may not be working because you're linking the wrong .htm document or it is misspelled. Remember that hosting areas are case sensitive. Be sure the names match exactly letter for letter including the .htm or .html file name extension.




Related Topics:
Watermark Setup
Setting Up The Gallery Slideshow