PI7 Web Slide Show

The PI7 Web Slide Show is a fun way to showcase a collection of photos. Just as you can for the PI7 web album, the Web Slide Show lets you customize the look of your web pages, including using your own backgrounds, text and link colors. You can create an HTML slide show, or a self-extracting .EXE slide show and put it on a CD to share with others. (View slide show made in this tutorial)

slide show

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Web Album, Template Library Slide Show, 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.

First you need some photos or other images you want to use in the album. This tutorial features photos of my current favorite hobby, cold process soapmaking, which I'm into in a big way. I have a handmade soap store, Sea Sprite Soaps. I even have a page of soapmaking book recommendations, if you're interested. All of the photos for your slide show must be in the same "source folder." It's a smart idea to make a new folder on your hard drive to hold the final slide show images and pages. Name the folder "pi7slideshow" or something like that so you'll be able to find it later.

To get started, choose File, Export, Web Slide Show. This will open the Select Image dialog box.

select image dialog box

Click the Browse button to browse to and select the source folder. Under Type, you can leave the default of all image types selected. Alternatively, if you'd prefer to only select JPG, GIF or some other file type for the slide show, select a specific file type from the dropdown list. If you wish to include images in subfolders, leave the default of "Include all subfolders" selected. Click OK.

Doing so opens up the Export to Web Slide Show dialog box. By default the Output tab will be selected. Under Output Options, click the Output Folder's Browse button. this opens up the Browse for Folder dialog box. Browse to and select the new "pi7slideshow" folder you just made on your hard drive.

select output folder

Click OK to return to the Output tab in the Export to Web Album dialog box. The selected folder will appear under "Output Folder." Leave the defaults of "Save as Web pages" and "Launch default browser to view pages when finished" selected.

export to web slide show

Note that if you click the Reorder button, the Web Slide Show Reorder dialog box will open. You can resize the thumbnails or drag thumbnails around to reorder them from this dialog box. I've increased the size of my thumbnails to 80 X 80 pixels. I dragged the thumbnails around a bit to rearrange their order in the slide show.

rearrange and resize thumbnails as desired

Click OK to close the Web Slide Reorder box. Click the Page Setup tab to insert your own Title tab, Heading and Footer text, select a page numbering method, and choose between buttons, text or numbers for the slide show pages.

page setup tab

You can format the Heading and Footer text by clicking the Format button next to each option. I like the Georgia font better than the default of Arial. As you can see in the screen shot below, I clicked Format and edited the font. You could also edit text color, alignment and style from here.

format text

Click OK to close the Text Format box. When returned to the Page Setup tab, click the Advanced button to custom edit HTML page features. I've selected an image file for the page background, a midi file (Audio file) to play during the slide show, and edited the text and link colors. The Sample Preview window shows you exactly how these settings will look on a web page.

advanced HTML page attributes

Click OK to accept these advanced settings and return to the Export to Web Slide Show dialog box. Click on the Slide tab to edit image size, JPG compression value, time delay settings or add a border around each image in the slide show..

slide tab

Note in the screen shot above that I've deselected "Limit image viewing size" because I know that all of my photos are smaller than 2048 pixels. I've deselected Resize Image because I don't want each photo to be blown up. Depending on how big your photos are, you may elect to select these options selected, but they aren't what I want in this slide show. I like a 90% JPG compression level, so I'm leaving the default value selected. If you don't want the slide show to advance automatically, deselect "Automatically advance to next page" and enter a Delay Time (in seconds).

Now that you've selected all the attributes for the slide show, click Preview to take a look at it in your default browser. Check to be sure that the correct images have been selected, that the music plays (if you added a midi file), that the images aren't over-compressed and that it all plays smoothly. After you preview, close your browser to return to the work space. If you noted any problems while viewing the slide show, fix them now by selecting the appropriate tab and options, then preview again to make sure it all works OK

To save the slide show to the output folder, click OK. This will close the Export to Web Slide Show dialog box and open your browser so you can view the slide show. Close your browser when you're done looking at the slide show.

Important Tip: Some people have reported problems saving slide shows. If you get an error message saying that your slide show wasn't saved properly because your music file could not be created, don't panic and close PI7. Leave your Export Web Slide Show dialog box open. Via My Computer or Windows Explorer, navigate to your music midi file, right click and copy it, then paste it manually into the web slide show's BgMuisc folder. Return to PI7's Export to Web Slide Show dialog box and click OK again. It should work that way.

PI7 creates web slide show pages in the folder to which you saved it on the hard drive, including web pages for the background sound (bgSound.html) and image files for the navigation buttons (if you chose that option). In addition to main.html, there are pages for main1.html, main2.html, etc., including a page for each image in the slide show. Also created automatically for you are three subfolders: BgImage (holds the background image), BgMuisc (spelled wrong, holds the midi music file) and Images (holds the full size images). If you explore the pi7slideshow folder (or whatever you've named the folder) in My Computer, you'll see a file structure like this.

web slide show file structure in my computer

When you upload the web slide show files, you must mirror this file structure on your server. Namely, you will put the navigation images and main.html, main1.html, main2.html, etc. into the main directory. You must make on your server, within this directory, subfolders called BgImage, BgMuisc (yes, spell it wrong) and Images. Then upload the images and HTML pages in each of the folders on your hard drive to the corresponding folders on your server. This is very important. If you don't get everything into the correct folders on your server, the web album will not work.

View the web slide show created in this tutorial.

This tutorial uploaded 12/07/01

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



Back to Homepage