Got questions about this? Dgrin's Customizing Forum to the rescue!

Before you set it up, take a look at the settings from the source gallery (the gallery that holds the photos for your slideshow).
It must NOT be passworded and the external links option needs to be set to yes.

To set this up in place of your SmugMug bio on your home page, place this in your bio:

<html>
<script>
var ssConfig = {
    AlbumID: '2504559',
    AlbumKey: 'f3ta9',
    newWindow: 'false',
    transparent: 'true',
    splash: 'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png',
    showLogo: 'false',
    clickUrl: 'http://www.smugmug.com',
    showThumbs: 'true',
    showButtons: 'true',
    crossFadeSpeed: '350'
};

SM.flash.insertSlideshow(600, 600, ssConfig, 'transparent');
</script>
</html>

If you add additional parameters, each line (parameter) must end with a comma, except for the last line, which should not have a comma.

Look at the above for reference. Notice the comma at the end of each line except for the last one, crossFadeSpeed.

If you have a bio photo you want to remove, put this in your control panel->customize->css:

#bioBox .photo {display: none;}

To center the slideshow, add the following to your CSS in your customization:

If you go this route, after you save anything to your bio you will have to _reload_ the page after you save it to see the slideshow as the javascript has to get parsed.

OR

Embed Flash Slideshow

To embed an amazingly cool slideshow of your fabulous photos in a web page that accepts HTML (such as a forum post on dgrin.com or a blog), copy and paste this code:

To change the arguments passed to the slideshow change and/or add more items to the two bold lines in the above code. Note the same arguments must be in both those lines, the first line is for all IE browsers, the second line is for all other browsers. If you put different arguments in those lines some users will see one thing and some will see something else.

There are many other options you can change, described at the bottom of this page.

Notes and gotchas:
-Photo crossfade performance drops rapidly depending on the size of the slideshow and the power of the user's computer so to help insure general level of good performance you cannot have a transparent slideshow greater then 1024 wide.

Slide Show Parameters

The meaning of the parameters:

setSpeed: 'slow/med/fast'
- Set the default slideshow speed
- Default: med

showSpeed: 'true/false'
- Display the slow/med/fast speed options
- Default: true

autoStart: 'true/false'
- Start playing the slideshow as soon as its loaded OR don't start until they click the show
- Default: true

captions: 'true/false'
- Display image captions within the slideshow
- Default: true

showLogo: 'false/true'
- Show our smugmug logo in the corner of the slideshow
- Default: true

clickUrl: '<blank>/false/<url>'
- What url clicking on the slideshow send you to
- Default: blank
- blank = clicking goes nowhere
- url = clicking goes to that url

clickToImage: 'true/false'
- Clicking on the image shown in the slideshow will take you to the image in its gallery
- Default: false

newWindow: 'true/false'
- If clickToImage or clickUrl should open a new window or in the current window
- Default: true

splash: '<url>'
- Url to an image you want to set as your splash image
- Default: blank
- Remove this line if you don't want a splash

splashDelay: '<int>'
- The amount of time to have to splash show in milliseconds
- Default: 1000

showThumbs: 'false/true'
- Show thumbnails
- Default: true

* AlbumID: '<int>' *
- ID of album to show photos from
- The album ID is located in the URL when viewing any of your albums, for instance in the url http://cmac.smugmug.com/gallery/2504559_f3ta9#131481399, the album id is the set of numbers after /gallery/ and before the #-symbol followed by the ImageID - in this example the AlbumID is 2504559
- SEMI-REQUIRED You must either provide an AlbumID OR a feedURL as below or nothing works.

* AlbumKey: '<string>' *
- Key of album to show photos from
- The album key is located in the URL when viewing any of your albums, for instance in the url http://cmac.smugmug.com/gallery/2504559_f3ta9#131481399, the album key is the string of characters after /gallery/2504559_ and before the #-symbol followed by the ImageID - in this example the AlbumKey is f3ta9
- SEMI-REQUIRED You must either provide an AlbumID and AlbumKey OR a feedURL as below or nothing works.

showStartButton: 'false/true'
- Whether a play/pause button shows
- Default: true

showButtons: 'false/true'
- Whether to show any play/pause/next buttons
- Default: true

transparent: 'true/false'
- This should just always be true, its if the slideshow is transparent or not, can also bgColor otherwise
- Default: true

bgColor: '<hex color like FF0000>'
- Specify a background color for the slideshow as opposed to being transparent
- Default: 000000

crossFadeSpeed: '<int>'
- The speed (in ms) of the crossfade
- Default: 350

* feedURL: '<url>' *
- feed url to use; must be api.smugmug.com instead of nickname.smugmug.com
- Two things to note, you need to change every instance of '&' in the feed url to '%2526' and change thd domain to come from api.smugmug.com
- lose the format parameter at the end of our feed URLs, like this one: &format=atom03
- SEMI-REQUIRED, you must either provide a feedURL OR an AlbumID as above or nothing works.
- To see how to make feeds visit FeedsTricks
- here's an example of a recent photos feed using the complete encoding from above (I broke the line for readability purposes):
  ***feedURL: 'http%3A%2F%2Fapi.smugmug.com%2Fhack%2Ffeed.mg%3FType%3DnicknameRecentPhotos%2526Data%3Dgodsblueprints'

randomStart: 'true/false'
- Leaves the images in the original order but starts at a random location
- Default: false

randomize: 'true/false'
- Shuffles the order of images in the slideshow and starts at the beginning
- Default: false

borderThickness: '<positive, even integer>'
- Thickness of the border around each image
- Must be a POSTIVE, EVEN integer
- Default: blank

borderColor: '<hex color like FF0000>'
- Specify the color of the border
- Both borderThickness AND borderColor must be specified for the border to show

forceSize: '<standard-url>'
- Force the slideshow to use a standard sized photo regardless of slideshow size
- Valid arguments are TinyURL, ThumbURL, SmallURL, MediumURL, LargeURL, OriginalURL

borderCornerStyle: 'square/rounded'
- Sets the border style if using borders
- Default: rounded

imgAlign: 'top/<blank>'
- Aligns the displayed image at the top of the slideshow area
- Default: <blank>

Notes and things that could use clarification:

To create Keyword based slideshows read about the feedURL option above.

GOTCHA:

Add Text To Your Bio So Your Search Results Look Better

So, if you are using this cool flash slideshow in your bio, you will want to also add some text (that will be hidden) so that your searches on SmugMug do not look like this.
It will also keep a Google search from picking up only the slideshow code in the bio and will, instead,
show your text first.

To get around this, add some text to your bio, above the slideshow code, and hide it using CSS. At the top of your bio, add:

Then add your slideshow code. Remember to surround everything in your bio with HTML tags. Place <html> at the very beginning, and </html> at the very end.

In your CSS box in your advanced site-wide customization, add this:

Now, the search results will look like this:

Problem solved

ANOTHER GOTCHA:

AdBlock - Firefox Extension

Be sure to add an exception for SmugMug in your AdBlock preferences, or your slideshow may not function correctly.

Sharing a slideshow link - TIP

You can construct keyword urls:

http://www.moonriverphotography.com/photos/swfpopup.mg?url=http://www.moonriverphotography.com/keyword/buy+stock+photography#252240584_XoThr

Page Operations

Browse Space

Flash Slideshow

Labels: