Flash Slideshow

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',
    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:

#userBio {text-align: center !important;}

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

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:

<object align="middle" height="600" width="600">
<param name="movie" value="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=2504559&AlbumKey=fO3Dg&transparent=true&crossFadeSpeed=500&clickUrl=http://www#46;smugmug#46;com">
<param name="wmode" value="transparent">
<param name="bgcolor" value="000000">
<param name="allowNetworking" value="all">
<param name="allowScriptAccess" value="always">
<embed src="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf?AlbumID=2504559&AlbumKey=fO3Dg&transparent=true&crossFadeSpeed=500&clickUrl=http://www#46;smugmug#46;com"  wmode="transparent" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" height="600" width="600"></object>

The only two things you need to change is where it says AlbumID=2504559 and AlbumKey=fO3Dg, replace the AlbumID number with the ID and the AlbumKey with the Key of the album you want to show in the slideshow. To get the album ID and Key, go to the album and look at its Internet Address (URL). For example, this album, http://dgrin.smugmug.com/gallery/3591446_xWjD , has an ID of 3591446 and Key of xWjD. You will have to replace the Album ID and Key in the code you see above in two places (so a total of 4 changes).

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

The meaning of the parameters:

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
- URL must use #46; instead of any dots '.'
- blank = clicking goes nowhere
- url = clicking goes to that url

splash: '<url>'
- Url to an image you want to set as your splash image
- Default: blank
- URL must use #46; instead of any dots '.'
- 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
- url needs special encoding for characters:
  - ':' must be '%3A'
  - '/' must be '%2F'
  - '?' must be '%3F'
  - '&' must be '%2526'
  - '=' must be '%3D'
  - '-' must be '%2D'
  - a more extensive list of hex codes for special characters can be found here
  - make sure that you also check that any special characters in your nickname, e.g. a dash, are encoded properly
  - this should be the start of your feed url: http%3A%2F%2Fapi.smugmug.com%2Fhack%2Ffeed.mg%3FType%3D
- 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'
- If it'll start on a random image every time
- 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

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, and hide it using CSS.

<html>
<div id="bioText">ADD A FEW LINES OF TEXT HERE. REMEMBER, WHATEVER YOU ADD HERE WILL PARTLY SHOW IN THE SEARCH RESULTS.</div>
<script>
Rest of slideshow code.
</script>
</html>

Then, in your CSS code in your customization, add this:

#bioText {display: none;}

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