Your download includes everything you need to create a stand-alone flash slideshow or a slideshow to add to your html pages. You do not need the Flash Authoring Software.
Size your images to the maximum size that you want them to appear in the slideshow. Save your images in .jpg format into the images folder. Make sure the JPG’s are saved as non-progressive JPG’s.
Open slideshow.xml using a text or html editor. Avoid using word processing software. This is a simple text file that tells the slideshow which images to use, what are the captions and links for each and in what order they should be displayed. It is also used to customize the way the slideshow looks and behaves. To see the structure click here.
At the top, right after the <slideshow opening tag is a list of attributes that are used to define how the slideshow will look and behave. See chart below for a description of each.
Each image in the slideshow is represented by a <image /> node. For each image you only have to set the img attribute, all other settings are optional. Create a tag for each image you want to display in the slideshow, and make sure that each image begins with <image and ends with />. Here’s an example of a properly formatted tag with all the possible options:
Test the slideshow by loading slideshow.html in the browser. Now upload the following files to your server: slideshow.html, slideshow.swf, slideshow.xml, flashdetect.js, and the images folder. That’s it!
Adding videos to the slideshow is as simple as adding images – just enter the path to your .flv flash video in the img attribute of the image node. Here’s an example of a video XML node:
If your slideshow is paused, you can set each video to display a specific frame while it’s paused. This is useful because many videos start with a black screen, and it’s nice to display a preview of the video. By setting videoPreviewTime=1 your video will display a frame 1 second from the beginning. When a user clicks play, it will still play form the beginning. You can control the video using the same buttons as images. You can play/pause, skip to the next or previous, and mute the videos.
This slideshow allows your viewers to browse your pictures and videos in full screen mode. The demo file is all set, but you are planning to add the slideshow to your own page, you’ll need to make sure that you enable full screen in html. To do this, you need to set allowFullScreen parameter to true in the flash embed tag. Using swfObject, it looks like this:
Open slideshow.xml using a text or html editor. Each name/value pair represents a setting in the slideshow. The following is a table of descriptions and sample values.
| Attribute with sample value | Description |
| displayTime="5" | Time in seconds each image stays on. |
| transitionSpeed="1.5" | Speed of transitions in seconds |
| transitionType="Wipe" | Type of transition. Possible value include: |
| motionType="Strong" | Type of motion to be applied to transition. Possible values include: "Back" "Bounce" "Elastic" "None" "Regular" "Strong" Strong and Regular are probably the most useful, but there might be circumstances in which you would need to use the others. Play around to get a feel for each. |
| motionEasing="easeOut" | Type of easing to be applied to transitions. Possible values include: "easeIn" "easeOut" "easeInOut" This setting will make transition slow down toward the beginning, end or both. |
| randomize="false" | Setting to true will shuffle the order of images |
| slideshowWidth="435" | Width of slideshow. Set to "auto" to use Stage.width |
| slideshowHeight="300" | Height of slideshow. Set to "auto" to use Stage.height |
| slideshowX="center" | Horizontal position of slideshow. Can be a number or the word "center" |
| slideshowY="0" | Vertical position of slideshow. Can be a number or the word "center" |
| bgColor="FFFFFF" | Background color of slideshow |
| bgOpacity="100" | Background opacity |
| showHideCaption="false" | Set to true to automatically hide captions on roll out and show on roll over. "false" will keep them shown at all times. |
| captionBg="FFFFCC" | Caption background color |
| captionBgOpacity="60" | Caption background opacity |
| captionTextSize="14" | Size of text |
| captionBold="false" | Set to true to make captions bold |
| captionTextColor="666666" | Color of text |
| captionPadding="15" | Padding around captions |
| captionTextAlign="left" |
Alignment of the captions. Can be: "left", "center" or "right" |
| showNav="true" | Set to false to hide navigation at all times. |
| autoHideNav="true" | Assuming showNav is set to true, setting autoHideNav to true will fade the navigation after the user has rolled off and a short pause has passed |
| navHiddenOpacity="20" | Opacity of nav when autoHidden |
| navX="center" | Horizontal position of nav. Set to a number or the following:"center", "left", "right" |
| navY="bottom" | Vertical position of nav. Set to a number or the following:"center", "top", "bottom" |
| btnColor="FFCC00" | Default color of buttons in nav |
| btnHoverColor="ffffff" | Color of buttons when rolled over |
| btnShadowOpacity="70" | Opacity of the shadow of buttons |
| btnGradientOpacity="20" | Opacity of gradient covering buttons |
| btnScale="120" | Scale of buttons from original size |
| FullScreenButtonScale="60" | Size of the full screen button |
| FullScreenButtonX="right" |
Horizontal position of the full screen button. Can be set to "left", "center", "right" or a number of pixels from left. |
| FullScreenButtonY="bottom" | Vertical position of full screen button. Can be set to "top", "center", "bottom" or a number of pixels from top. |
| showFullScreenButton="true" | Set to "false" to hide full screen button. |
| btnSpace="10" | Space between buttons |
| navBgColor="333333" | Background color of nav |
| navBgAlpha="95" | Background opacity of nav |
| navCornerRadius="5" | Roundness of nav corners |
| navBorderWidth="2" | Thickness of border around nav |
| navBorderColor="FFFFFF" | Color of border around nav |
| navBorderAlpha="100" | Opacity of border around nav |
| navPadding="15" | Space between buttons and border of nav |
| navMargin="10" | Space between the navigation and the edge of the slideshow |
| tooltipSize="11" | Text size of tooltip |
| tooltipColor="ff7f00" | Color of tooltip text |
| tooltipBold="false" | Set to true to make tooltip text bold |
| tooltipFill="FFFFFF" | Background color of tooltip |
| tooltipStrokeColor="000000" | Tooltip border color |
| tooltipFillAlpha="80" | Tooltip background color |
| tooltipStroke="3" | Tooltip border thickness |
| tooltipStrokeAlpha="100" | Tooltip border opacity |
| tooltipCornerRadius="5" | Roundness of tooltip corners |
| loaderWidth="150" | Width of loading bar |
| loaderHeight="5" | Height of loading bar |
| loaderColor="FF0000" | Color of loading bar |
| loaderOpacity="100" | Opacity of loading bar |
| attachCaptionToImage="false" | Set to true will make captions same width as image |
| imageScaling="fill" | Controls scaling of images. Accepts the following values: fit – scales image proportionately up or down to fit the slideshow area fill - scales image up or down to proportionately fill slideshow area downFit – scale images down to fit. If images are smaller than slideshow area, they are not scaled up downFill – scale images down to fill. If images are not big enough to fill, they are not scaled up. stretch – stretches images to fill slideshow area none – no scaling is applied. |
| slideshowMargin="20" | Number of pixels between image and edge of the slideshow |
| showMusicButton="true" | Set to true to display music button in navigation if music is defined |
| music="images/music.mp3" | Location of mp3 music file to be used in slideshow. If not defined, no music will play and no music icon will appear in navigation. |
| musicVolume="100" | Volume of music |
| musicMuted="true" | Set to true to start slideshow with sound off. Users will still be able to turn the sound on if you display the navigation and the sound button. |
| musicLoop="true" | Set to true to loop the music. |
| watermark="logo.swf" | Define an external image to be loaded on top of the slideshow. This can be a logo or a watermark at a set opacity. You can use a jpg image or a .swf flash movie. |
| watermarkX="left" | Horizontal location of watermark. Can be set to: "left", "center", "right" or a number. |
| watermarkY="bottom" | Vertical location of watermark. Can be set to: "top", "middle", "bottom" or a number |
| watermarkOpacity="100" | Opacity of watermark |
| watermarkLink="http://flashnifties.com" | You can link the watermark to a url. Set full url, including http:// |
| watermarkLinkTarget="_blank" | Target of the watermark link. |
| captionsY="abstop" | Vertical placement of captions. Can be set to: "top" – top of image "middle" – middle of slideshow "bottom" – bottom of image "abstop" – top of slideshow "absbottom" – bottom of slideshow |
| loopSlideshow="true" |
If set to false, the slideshow will stop on the last image |
| disableBackwardLoop="true" |
If set to false, users will not be able to go back from the first image. |
| startPaused="false" |
Set to true to start the slideshow in paused mode |
| kenBurnsEffect="pan" |
Defines the type of Ken Burns effect that the slideshow will use. Can be set to: "none" – No Ken Burns effect "random" – No Ken Burns effect "zoomIn" – Images start smaller and zoom in "zoomOut" – Images start bigger and zoom out "zoomInOut" – Alternate between zooming in and out "zoomRandom" – Randomly zoom in and out "pan" – Randomly pan diagonally "panRight" – Pan from left to right "panLeft" – Pan from right to left "panLeftRight" – Alternate between left and right pan "panRightLeft" – Alternate between right and left pan "panUp" – Pan from down up "panDown" – Pan from up down "panUpDown" – Alternate between up and down pan "panDownUp" – Alternate between down and up pan |
| kenBurnsEffectAmount="0.1" |
Determines the amount of motion. A setting of 0.1 will scale the image by 110% and move by the amount of slack created by the scaling. 0.9 will scale the image by 190%, etc. |
| preloadBuffer="5" | The slideshow preloads slides to ensure smooth viewing. This number determines how many slides ahead of the user the slideshow should load. |
| showSlideNumbers="true" |
Set to true to display slide numbers. Slide numbers can be clicked to go directly to that slide. |
| slideNumbersTextSize="11" |
Text size of slide numbers. |
| slideNumbersTextColor="FFFFFF" |
Text color of slide numbers. |
| slideNumbersTextActiveColor="0099CC" |
Text color when slide is active. |
| slideNumbersBgColor="000000" |
Background color of slide numbers. |
| slideNumbersBgOpacity="50" |
Background opacity of slide numbers. |
| slideNumbersBgActiveColor="000000" |
Background color of active slide number. |
| slideNumbersBgActiveOpacity="100" |
Background opacity of active slide number. |
| slideNumbersBgCornerRadius="0" |
Roundness of slide numbers background. |
| slideNumbersMargin="5" |
Space between the numbers. |
| slideNumbersX="left" |
Horizontal placement of slide numbers. Can be set to: "left", "right", "center" or a number in pixels from left. |
| slideNumbersY="bottom" |
Vertical placement of slide numbers. Can be set to: "top", "middle", "bottom", or a number in pixels from top. |
| slideNumbersNavPadding="5" |
Space between the slide numbers and the edge of slideshow. |
| slideNumbersBgWidth="22" |
Width of individual number boxes. |
| slideNumbersBgHeight="20" |
Height of individual number boxes. |
| slideNumbersTextX="2" |
Number text horizontal position within box |
| slideNumbersTextY="0" | Number text vertical position within box |
| videoPreviewTime="1" | When slideshow is paused, video slides show a preview frame. This sets seconds into the movie, for the preview. |
| getPageOnComplete="http://yoursite.com" | This slideshow allows you to send the user to a url upon completion. Omit this tag if you want to keep the user on the page(default setup). |
| getPageOnCompleteWindow="_blank" | Target of the link for above setting. |
| useCustomUI="true" | Set to "true" to use custom buttons. |
| customBack="back.png" customBackHover="back_hover.png" customNext="next.png" customNextHover="next_hover.png" customPlay="play.png" customPlayHover="play_hover.png" customPause="pause.png" customPauseHover="pause_hover.png" customMute="mute.png" customMuteHover="mute_hover.png" customUnMute="unmute.png" customUnMuteHover="unmute_hover.png" customFullScreen="full_screen.png" customFullScreenHover="fs_hover.png" customExitFullScreen="extfs.png" customExitFullScreenHover="extfs_h.png" |
Path to the images for custom navigation. Sample images and .psd file provided in download. |
Play around with the above settings to achieve the desired style for your slideshow.
In some cases you just don’t want to bother with XML, and would rather drop a bunch of images in a folder and have them appear in the slideshow. Well, you’re in luck! Follow the steps below and you won’t have to look XML in the face again.
Step 1
You will need to download this file: auto.zip
Step 2
Unzip the file and open auto.php. At the very top set $file_dir to the directory you want the gallery to read from. There are a couple of other options:
$show_titles will allow you to display image titles as captions (without the .jpg)
$omit_chars allows you to set the number of characters to be omitted from the beginning of the image title. So, 01_image_title.jpg will show up as "image_title" in the caption. Useful for sorting.
$link_to_image lets you link each slide to the image directly.
You can also adjust the slideshow settings just as you would in slideshow.xml. Change any of the settings starting with displayTime="3" and ending with pausedAtStart="false". If you made adjustments to your slideshow.xml, you can copy/paste the settings from there.
Step 3
In your slideshow.html change the following line:
so.addVariable("file", "slideshow.xml");
to:
so.addVariable("file", "auto.php");
Step 4
Now you will need to upload everything to a server that supports php (most do). The gallery will not work on your local computer.
This method makes things considerably easier to update, but there are sacrifices. You will not be able to set any custom settings for each slide, such as captions, tooltips, links or transitions.
The slideshow allows you to custom style each individual caption and tooltip with html tags. If you do not include any html tags, the default style will be applied, however if you want to use html formatting, you will need to create a font style for the entire caption or tooltip, otherwise it will be defaulted to black 12 point text.
If you do not properly escape the < , > and " characters, the slideshow will not work. The download includes some examples of html formatted text. Here is a handy utility you can use to convert your html code to escaped text that can be used in captions:
Click here to go to Adobe download page.
The slideshow comes with a javascript/php version that runs on a mobile device such as an iphone or iPad. If a user does not have a flash-enabled device, a link to the slideshow is displayed in place of flash. If you are using the basic setup, you should not need to make any modifications for the iPhone slideshow to work. The slideshow reads all the content from slideshow.xml, and creates all the appropriate image sizes.
If you change your file structure or rename the xml file, you will need to set the right paths for the iPhone version.
Inside the iphone/ folder, find _config_pipho.php and open it in an html editor. At the very top you’ll see two settings that you should consider:
define(‘CONTENT_XML’, ‘../slideshow.xml’);
This sets the path for your slideshow.xml file relative to the iPhone folder. If you move the folder, you should adjust this accordingly.
define(‘BASE_URL’, ‘../’);
This is the text added to all of the image paths when viewing the iphone version. Again, this needs to be relative to the iphone/ folder.
NOTE: iPhone gallery requires PHP 5 with GD graphic library support.
Follow these steps to add iPhone support to an earlier release of the slideshow without losing any of your settings or content.
1. Download latest release and unzip the files.
2. Copy over the iphone/ folder into your slideshow folder.
3. On the page where your slideshow appears add a link to the iPhone slideshow. In the source code change:
<div id="flashcontent">
<h3>Oops!</h3>
<p>It looks like you don’t have flash player 6 installed. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=
ShockwaveFlash" >Click here</a> to go to Adobe download page.
</p>
</div>
to:
<div id="flashcontent">
<a href="iphone/index.php" class="iphoneBtn">Launch iPhone Slideshow</a>
</div>
If your file structure is different from the default setup, make necessary path adjustments outlined above.
Want to try before you buy? Free version has all the functionality, but includes a small link to this site.
Use a credit card or PayPal. Download will start immediately after purchse. You’ll also receive an email with the download link.
Price: $20
I would like to say that you have done an amazingly great job! Masterfully executed! Throughly designed! Perfect in every way. Thank you so much for offering a photo gallery that works like a photo gallery should.
Steve Nyhof (Auto flash gallery)
Just bought your product and i can't say enough good things about it. I'm not the most proficient flash user, which is part of the reason i got this product...to help a project.
Sandlog (Flash Media Gallery)
I've used your xml flash gallery just a couple of days, but I was so impressed that I just had to give you props. This is all I could have asked for an more. Thanks!
Todd D. (XML flash gallery)
more testimonials