SmugMug HTML 5 Slideshow

Here’s an example of an SmugMug slideshow using HTML 5 Slideshow!

To create one:

  1. Go to a gallery on your SmugMug site and navigate to the first image
  2. Click “Share” and then “Get a Link”
  3. Click the “Gallery Links” tab.
  4. On the slideshow line, you should see an ID at the very end of the link (example: http://www.aaronmphotography.com/photos/swfpopup.mg?AlbumID=22539979&AlbumKey=kFDt2C). Copy that
  5. Create a URL as follows:
    {your site url}/frame/slideshow?key={ALBUM_KEY}
  6. This is your now your SOURCE url.
  7. Use the following HTML to embed it in to a website:
    <iframe src="{SOURCE_URL}" width="{width}" height="{height}" frameborder="0" scrolling="no"></iframe>

The default Slideshow just shows images with a fade transition.
You can add the following additional parameters to the URL:

  • &autoStart=0
  • &captions=1
  • &navigation=1
  • &playButton=1
  • &speed={SECONDS}
  • &transition=none
  • &transitionSpeed={SECONDS}
Aaron M Written by:

Aaron Meyers is a landscape and wedding photographer living in Silicon Valley, CA. His love of the outdoors makes for frequent forays into the Californian wilds, where he delights in the stunning vistas of Yosemite National Park, Lake Tahoe, Big Sur, and the Pacific Coast.

7 Comments

  1. January 10, 2015
    Reply

    Can you help me to figure out what I have wrong on my code?

    Thank you!

  2. reggy10
    April 13, 2015
    Reply

    This code saved me today. Thanks 🙂

  3. William
    August 30, 2015
    Reply

    Hello Aaron,

    Thank you for sharing the instructions. However, I’m not able to get it working. Are the pictures of this slideshow stored in smugmug? Is it possible for you to share the source code?

    Many Thanks,

    William

  4. Kelly Reece
    September 25, 2015
    Reply

    Can you please tell me where to find “your site url” needed in Step 5? We are trying to post a slideshow to a blog and are having great difficulty. When we follow your steps, using the gallery link slideshow url with our album key correctly copied and pasted, we get a very small scrolling slide show…..not just pictures like yours posted above. THANKS!

  5. Brandon
    October 28, 2015
    Reply

    Hi Aaron,

    Thanks for sharing your SmugMug HTML5 slideshow generator—it’s exactly what I’ve been looking for! Unfortunately the width and height fields aren’t working for me in Chrome, Safari or Firefox on Mac. Regardless of what values I enter into those fields, the embed code reverts to 800×600. Obviously, it’s easy enough to modify those values in the embed code once it’s created but I thought you should know. Please let me know if you’re able to fix the width and height fields.

    Also, I thought you should know that there are a bunch of new transition options in the SmugMug slideshows. From what I can tell, the syntax is simple. For example “Zoom In” would be simply, “&transition=zoomin”. A list of all available transition styles is below.

    Zoom In
    Zoom Out
    Zoom In/Out
    Zoom Out/In
    Slide & Zoom
    Slide Down
    Slide Up
    Slide Up/Down
    Slide Left
    Slide Right
    Slide Left/Right
    Flip Down
    Flip Up
    Flip Left
    Flip Right
    None

Leave a Reply

Your email address will not be published. Required fields are marked *