PI8 Template Library Slide Show

In addition to being able to make and burn a web slide show to a CD, PI8 has added some clever web slide show templates with rollover navigation buttons to the EasyPalette.

slide show template

One caveat, however, is that while slide shows made from the templates can be viewed in IE, they do not run properly in Netscape because of the javascripts associated with the rollover buttons. Some of the templates will work when viewed in Netscape if you choose to Auto start the slide show and delete all of the navigation buttons (and Script Effects associated with them), but it takes a lot of tinkering.

In this tutorial, I'm going to use a slide show template to make a slide show with photos of my kids holding their Ball Pythons. If you're using IE, you can see the slide show here. If you are interested in other tutorials on using PI to build web pages, you may want to check out my Original Slide Show Layout, Component Designer Web Page, Web Album, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

To use a slide show template, double click on a thumbnail in the EasyPalette's Web Templates, Slide Show tab group. The template will open in the work space. I'm using the one shown below.

When the slide show template opens in the work space, right click on the Grouped objects and choose Ungroup. Hit the Enter key to deselect all objects (or choose Objects, Deselect All Objects).The beach photo in the middle of the interface is where the slide show will take place. A Description of the photo (if specified later on) will appear in the shiny blue box underneath the interface. On the right side are rollover buttons that can be used to control the slide show display.

Before creating the slide show, you should assign to it Web Properties. Choose Web, Web Properties, which opens by default to the General tab. Type in the desired information. Go through each tab to select the most appropriate options for your slide show. You can change the background image from the Background tab, if you wish. If you don't understand how the dialog box works, check out this PI8 Basic on Web Properties.

There are a lot of objects in each slide show template. Many have default text objects which you can select and edit to suit your own preferences. For example, I selected and then edited the default PhotoImpact text in this template and replaced it with my name.

replace default text

I didn't want the default photo of a beach to appear in my slide show, which will feature photos of my kids holding their Ball Pythons. So I selected and filled the cell in this object with black, added white text that says "Ball Python Slide Show" and merged the text with the black object. Note that I didn't replace the object, I only edited it, so it stays exactly the same size. You can see what it looks like now below.

edit slide show object

Once you've established the Web Properties and edited objects as needed, choose the Slice tool from the Tool Panel. The Pick for the Slice tool will be selected in the Attributes toolbar (circled below). Do not select Auto Slice! Note that the template is sliced into cells as soon as you select the Slice tool.

select slice tool

Click on the slice that used to have the picture on it in the middle of the template to make it active. That's where you'll be editing the script that makes the slide show.

select this cell

If the Slice Panel isn't open in the work space, click Panel in the Attributes toolbar. Click on the Script Effects tab. Click on the plus (+) sign next to "Triggered by cell" to expand the tree menu. Select "Slide Show," then click the "Modify Script Effect" button (circled).

modify script effect

By default, the Slide show dialog box opens to the Image tab. In it are default thumbnails. Click on one to select it, then hold down on the Shift key and select the last thumbnail, so all are selected. Click the minus (-) "Delete Selected Images" button to get rid of them. They will not be deleted from your hard drive, only from the slide show.

Click the "Add Images" button (circled) to access the Open dialog box.

add images button

Browse to and select images you want to include in the slide show. Select a thumbnail, then enter a URL, Target Frame, Alt Text and Description for each photo, if desired.

slide show dialog box

Note that you can rotate photos, in case you've held the camera sideways when taking them. You can drag the thumbnails to change the order, too. When you're done reordering the slides, select all of the thumbnails by clicking on the first one, then holding down on the Shift key while clicking on the last one.

Next, click the Layout button. You'll see that the appropriate cell has been selected.

Click the Options tab. This is where you can control Global Settings, such as whether or not the slide show Autostarts, the length of time (in seconds) each slide is displayed and mouseover effect. In the Mouse Click Actions section, you can elect to have no effect, open the next image, or have a larger version of the image open on MouseClick (which I've selected in the screen shot below). In the Thumbnail Images section, "Resample Images" resizes to fit the display area. Select "Protected images from save as to local host" to prevent others from right clicking on your images and saving them to their own computers. Under Image Compression Settings, choose an image file type and preset. If you've created your own Image Optimizer presets, they will be included in the Preset dropdown list. I'm using my custom 90% Standard Optimized JPG preset.

options tab

See the circled Options button in the screen shot above? If you've selected Popup Window and click this button, you'll get a Popup Window dialog box (shown below), in which you can choose to have a larger version of the photo show in the Popup Window.

popup window options

Since my digital photos are all 1600 X 1200 pixels, I've specified that each image is to be shown at 600 X 450 pixels (a size which preserves the width to height ratio). Alternatively, you can click the Pixels button to select a preset for the Popup Window size. You may also select a Background Color for the Popup Window by clicking in the Color box. You're going to have to do this for every one of the images by clicking on the forward and back arrows at the top of the dialog box to access the individual photos in the slide show.

edit each photo's popup features

Click OK to close the Popup Window dialog box and return to the Slide Show dialog box. Click OK to close the Slide Show dialog box.

Now it's time to preview the slide show prior to saving it. Choose File, Preview in Browser. In a second your browser will open and you should see the slide show play. If you've chosen to have Popup Windows open, click on the image in the slide show to make sure that a new window of the desired size opens with a larger version of the image. The rollover navigation buttons will not work properly during the preview. However, the rollovers will work fine after you save the slide show as a web page and do a little tweaking, which I'll describe later.

Close the browser when you're done previewing the slide show. If the slide show doesn't display to your liking, return to the Slice tool and click on the cell with the slide show script attached to it. In the Slice Panel, Script Effects tab, select the Slide Show script and click the Modify Script Effect button to re-open the Slide Show dialog box. Edit the slide show and preview again until you're satisfied with it.

To save the web page with the embedded slide show, choose File, Save for Web, As HTML. Doing so will open the Save As dialog box. Browse to the desired folder for the save. Give the HTML page for the slide show a name and click Save. Note that if you name this page index and upload it to your main directory on your server, it will overwrite your home page! So if you name it index, be sure to create a special directory to hold it on your server. I'm saving mine as index to a sstemplate directory on my server.

If you look at My Computer, you'll see that PI8 automatically creates the desired HTML page, as well as js (javascript) and images subfolders.

folders created during save

Double click the js folder and you'll see that it contains subfolders and these also contains subfolders. There are lots of java scripts associated with the slide show. The photos in the slide show will be saved to the images subfolder with their original names. All of the objects in the web page template will be saved as separate images named for the HTML page. So if you name the page index, then the images will be named index_1.gif, index_2.gif, etc. Don't forget the spacer.gif image, which holds the table cells together.

When you upload this slide show page, you must have the exact same file structure on your server as you do on your local computer. Create a directory (folder) on your server for the slide show, then create two subdirectories within it named "images" and "js." Don't forget to make the subfolders in the js folder. Upload the files into the correct directories.

Initially I couldn't get this slide show to display properly. I kept getting red X's on the rollover buttons, even though the slide show worked and the buttons worked. After re-uploading several times, Web Code Goddess Kathy was kind enough to take a look at the HTML for me. She discovered that in some places the code referred to Spacer.gif (with a capital S) instead of spacer.gif, and this was causing the rollover buttons to not display properly. To make the slide show work, on your local computer rename spacer.gif to Spacer.gif, then re-upload it to your images folder on your server. You will have both spacer.gif and Spacer.gif in your images folder. Now the slide show should display properly in IE.

Finally, I want to emphasize that you don't need to use one of these templates to make a slide show web page right in PI8. You can make your own page design with your own objects, background and text, use the Slice tool to slice up the web page manually, then use the Slice Panel's Script Effects tab to add a slide show to a designated cell.

View the Ball Python Slide Show here.

This tutorial uploaded 9/30/02

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage