Introduction
Slideshows sequentially present a folder of jpegs in the form of a Flash movie with the following options:
- Transition animations such as crossfade with customizable settings
- MP3 music soundtrack
- Hyperlinks on the whole show or unique to individual images
- Multiple slideshows per page supported
- Images scale to fit the slideshow placeholder size
- Optional controller with next/prev/pause functions
Slideshows can be a fun way to present your portfolio, but they can also act as small eye catching elements on a page to call attention to specials, entice viewers to another part of your site, etc.
The –slideshow hint is applied to an image layer whose rectangular contents act as a placeholder. The slideshow will be the same size as the contents of the placeholder layer and will replace that layer in the final output.
When the –slideshow hint is used the Slideshow UI pane will become visible when you open SiteGrinder. For each combination of a –slideshow layer and a page there will be an entry in the Slideshow UI where you can select a folder of source images for the slideshow and choose settings.
Note: Flash slideshows will automatically come to the “top” of your page. Any other web graphics or text that overlap this layer will be obscured by the slideshow
Basic Steps to Create a Slideshow
This example assumes you have a folder of jpeg images on your local disk.
- In a Photoshop document add a new layer to be the slideshow placeholder
- WIth the new layer active, make a rectangular selection with the marquee tool that is the size you would like your slideshow to be
- Fill the selection with any color
- Change the name of the layer to anything you like and add the -slideshow hint to the end. (example: "test-slideshow")
- Open SiteGrinder
- Select the "Slideshows" panel
- You should see your slideshow listed in the left hand column
- Click the left hand column next to your show to open the settings dialog
- Choose the type of show and any other options
- Use the Browse button to find your folder of jpegs
- Close the Slideshow settings dialog and click SiteGrinder's "Build" button
SiteGrinder will build the page and the slideshow will automatically load and play when that page is opened in a browser.
Features
How Images Fit Into the Slideshow Rectangle
The Flash slideshow will always proportionally size the source images to the correct size when source images are larger than the slideshow layer contents.
It will never distort the shape of the images.
Source images that are smaller than the slideshow rectangle are never stretched larger - they are simply centered in the slideshow rectangle.
Adding Music
You can add music to a slideshow by placing an MP3 music file in the folder of images you are building the slideshow from. SiteGrinder will copy this file to your build folder.
Music will pre-load so it can begin playing at the same time the slides do. This can potentially delay the start of a show.
Pausing the show with the navigation controls will also mute the music.
Navigation
The Flash slideshow has a built in control for forward, previous, pause and play. This control is only visible when the person viewing the slideshow has rolled over it with their mouse.
You can optionally turn this control off in the Slideshow settings dialog accessible in the Slideshows panel of the SiteGrinder window.
Requirements for Viewing
In order to view your slideshow, users will have to have Flash Player 7 or later installed in their browsers.
You may wish to provide them with this link in order to obtain the latest version of Flash:
http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash
Currently non-progressive jpegs are the only supported image format.
Options
Different slide show styles have different playback options. These include fade in time, fade out time, and duration for each slide. You set these options in the Slideshow settings dialog accessible from the Slideshows panel of the SiteGrinder window.
Hyperlinks
You can set a hyperlink for your show in the Slideshow settings dialog accessible from the Slideshows panel of the SiteGrinder window. If you type a URL into the "Link URL" field then it will be the same for every image.
You can provide unique links for each image using metadata by following these steps:
- Select a metadata field to hold the link. The "description" field is a good one.
- Use a tool like Adobe Bridge to add your URLs to the JPEG metadata of each image in the field you selected.
- In the "Link URL" field enter the metadata code for the field you selected. In this case it would be "[[description]]" (without quotes)
