Non-Flash embeddable slideshow?

kdizz · October 24, 2014

Is a non-Flash embeddable slideshow available or in the works? As iOS and Android devices become increasingly popular, it seems that SmugMug isn't keeping up. Creating the same functionality using HTML5 and/or JavaScript should be fairly straightforward. Alternately, do you provide JSON feeds for galleries?

tomnovy · October 27, 2014

Hi Kdizz,

At the moment our embeddable slideshow is flash based. We do not have any information when a non flash version will be available. You can generate an RSS feed from your galleries - not JSON.

leftquark · October 28, 2014

I'm pleased to announce that we have an HTML5 version of the embeddable slideshow. Currently we do not offer an easy way to generate the embed code but you can embed an HTML5 slideshow as follows:

To create one:

Go to a gallery on your SmugMug site and navigate to the first image
Click “Share” and then “Get a Link”
Click the “Gallery Links” tab.
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 (in this example, the "kFDt2C")

Create a URL as follows:

{your site url}/frame/slideshow?key={ALBUM_KEY}

This is your now your SOURCE url.
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}

Example:

<iframe src="http://www.aaronmphotography.com/frame/slideshow?key=kFDt2C&amp;navigation=1" width="800" height="600" frameborder="0" scrolling="no"></iframe>

You can see an example of it working on my blog:
http://blog.aaronmphotography.com/2014/10/24/smugmug-html-5-slideshow/

kofa · November 10, 2014

Great news, thank you!

DougG · November 10, 2014

Aaron,
I use Blogger for my blog.
Are these the only two lines of code I need in a blog entry to display the slideshow?
Which values are substituted?
Apologies, I am sure your instructions are clear to those who understand HTML, but I don't.

Allen · November 10, 2014

You only need the ..... with the appropriate code inside.

DougG · November 10, 2014

Allen wrote: »

You only need the <iframe>.....</iframe> with the appropriate code inside.

Like this?
<iframe src="{{http://www.douglasgoodphotography.com}/frame/slideshow?key={QvpBKj}}" width="{width}" height="{height}" frameborder="0" scrolling="no"></iframe>

kofa · November 10, 2014

You don't need the curlies.
In the example page:
The
scrolling="no" frameborder="0" height="600" width="800"
part is there to size and configure the iframe.

leftquark · November 10, 2014

I see that kofa and Allen have beat me to it but yes, I realize it's a little confusing until we find a way to integrate it into SmugMug.

DougG wrote: »

Like this?
<iframe src="{{http://www.douglasgoodphotography.com}/frame/slideshow?key={QvpBKj}}" width="{width}" height="{height}" frameborder="0" scrolling="no"></iframe>

You can see this URL will load the slideshow: http://www.douglasgoodphotography.com/frame/slideshow?key=QvpBKj

Now you just need to wrap it into the iframe:

<iframe src="[COLOR="Magenta"]http://www.douglasgoodphotography.com/frame/slideshow?key=QvpBKj[/COLOR]" width="[COLOR="Red"]800[/COLOR]" height="[COLOR="Red"]600[/COLOR]" frameborder="0" scrolling="no"></iframe>

This will set it to 800pixels wide by 600 pixels high. You can change those numbers if you'd like.

If you wanted to add navigation buttons you can use the modifiers I established, for example:

<iframe src="http://www.douglasgoodphotography.com/frame/slideshow?key=QvpBKj[COLOR="Magenta"]&navigation=1[/COLOR]" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Let me know if you have any other questions!

DougG · November 10, 2014

kofa wrote: »

You don't need the curlies.
In the example page: <iframe src="http://www.aaronmphotography.com/frame/slideshow?key=BwCtkq&navigation=1" scrolling="no" frameborder="0" height="600" width="800"></iframe>
The
scrolling="no" frameborder="0" height="600" width="800"
part is there to size and configure the iframe.

Here is my code:

Here is my slideshow<br />
<br />
<iframe src="http://www.douglasgoodphotography.com/frame/slideshow?key=84QLZx&navigation=1" width="800" height="600" frameborder="0" scrolling="no"></iframe>
<br />
See my slideshow<br />

The URL displays in my browser just fine, but
I get a blank white frame between the text lines in my blog - no slideshow.
Sorry to be such a pain. Would appreciate understanding what I am doing wrong.

leftquark · November 11, 2014

Doug, Can you post a link to your site so I can take a look?

DougG · November 11, 2014

http://douglasgoodphotography.blogspot.com/
Thanks, Aaron.

denisegoldberg · November 11, 2014

DougG wrote: »

http://douglasgoodphotography.blogspot.com/

Doug -
Your slideshow shows in your blog for me. Is it not showing for you on all browsers?

--- Denise

DougG · November 11, 2014

denisegoldberg wrote: »

Doug -
Your slideshow shows in your blog for me. Is it not showing for you on all browsers?

--- Denise

Hi Denise,
It is not displaying with IE 11.
It shows as a big white box.

denisegoldberg · November 11, 2014

DougG wrote: »

It is not displaying with IE 11.
It shows as a big white box.

Very interesting. It doesn't work in IE11 for me either but I was able to confirm that it does work in the latest versions of Chrome and Firefox.

Hopefully Aaron can find an answer for this.
If it doesn't work on all browsers I would hesitate to use it...

--- Denise

DougG · November 11, 2014

denisegoldberg wrote: »

Very interesting. It doesn't work in IE11 for me either but I was able to confirm that it does work in the latest versions of Chrome and Firefox.

Hopefully Aaron can find an answer for this.
If it doesn't work on all browsers I would hesitate to use it...

--- Denise

Thank you, Denise.
I was beginning to think I was completely crazy!
I am using the most current release of IE - 11.0.13.
I agree that I won't use until it works on all browsers.
Doug

DougG · November 11, 2014

DougG wrote: »

Thank you, Denise.
I was beginning to think I was completely crazy!
I am using the most current release of IE - 11.0.13.
I agree that I won't use until it works on all browsers.
Doug

I am confirming that it works with Safari as well.

leftquark · November 11, 2014

Does the slideshow on my blog work in IE11? http://blog.aaronmphotography.com/2014/10/24/smugmug-html-5-slideshow/

denisegoldberg · November 11, 2014

leftquark wrote: »

Does the slideshow on my blog work in IE11? http://blog.aaronmphotography.com/2014/10/24/smugmug-html-5-slideshow/

Yes. I just checked on a computer running Windows 7 and the latest IE11.
I'll check on Windows 8.1 when I get home.

--- Denise

leftquark · November 11, 2014

Instead of using douglasgoodphotography.com in the code, could you try using yournickname.smugmug.com:

<iframe src="http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Also, if you open just the slideshow in IE11, does it show? http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1

Allen · November 11, 2014

leftquark wrote: »
Instead of using douglasgoodphotography.com in the code, could you try using yournickname.smugmug.com:
<iframe src="http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Also, if you open just the slideshow in IE11, does it show? http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1

It shows direct in IE but not in his blog using IE.
IE11

DougG · November 11, 2014

leftquark wrote: »
Instead of using douglasgoodphotography.com in the code, could you try using yournickname.smugmug.com:
<iframe src="http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Also, if you open just the slideshow in IE11, does it show? http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1

Aaron & Denise,
The slideshow on YOUR blog works on Windows 7 and IE11.
If I open MY slideshow directly in IE11 it works.
I substituted douglasgood.smugmug.com in the code for my blog, and it still does NOT work.
Just a white frame with no content.
So the issue appears to be the slideshow presentation within Blogger on IE11.
Doug

denisegoldberg · November 11, 2014

As an experiment I added an HTML5 slideshow to a (Blogger) blog I use for experimenting to see if it was an issue with Blogger and IE11. The slideshow works fine for me on IE11 and Windows 8.1.

You can see it at http://denisegoldbergplays.blogspot.com/2014/11/html5-slideshow-from-smugmug-gallery.html.

I'm not sure what the difference is between Doug's blog entry and the one that I just created, just thought it might be worth a comparison.

DougG wrote: »

If I open MY slideshow directly in IE11 it works.
I substituted douglasgood.smugmug.com in the code for my blog, and it still does NOT work.
Just a white frame with no content.

Doug -
Can you see the slideshow in my play blog (linked above) in IE11 and Windows 7 (I can check tomorrow when I get to work, don't have that environment at home)? It would be interesting to see if there is a pattern of failures.

--- Denise

DougG · November 11, 2014

denisegoldberg wrote: »

As an experiment I added an HTML5 slideshow to a (Blogger) blog I use for experimenting to see if it was an issue with Blogger and IE11. The slideshow works fine for me on IE11 and Windows 8.1.

You can see it at http://denisegoldbergplays.blogspot.com/2014/11/html5-slideshow-from-smugmug-gallery.html.

I'm not sure what the difference is between Doug's blog entry and the one that I just created, just thought it might be worth a comparison.

Doug -
Can you see the slideshow in my play blog (linked above) in IE11 and Windows 7 (I can check tomorrow when I get to work, don't have that environment at home)? It would be interesting to see if there is a pattern of failures.

--- Denise

Hi Denise,
Yes, I can see your blog slideshow on Windows 7 IE11.
Here is my blog code:

 <iframe src="[URL]http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1[/URL]" width="800" height="600" frameborder="0" scrolling="no"></iframe>

leftquark · November 11, 2014

DougG wrote: »
Hi Denise,
Yes, I can see your blog slideshow on Windows 7 IE11.
Here is my blog code:
 <iframe src="[URL]http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1[/URL]" width="800" height="600" frameborder="0" scrolling="no"></iframe>

This is going to be a little silly of a question, but when you enter the code to blogspot, does it put the "[ URL ]" and "[ /URL ]" in? It shouldn't be? It's hard to tell if DGrin is adding it automatically to your pasted code

DougG · November 11, 2014

leftquark wrote: »

This is going to be a little silly of a question, but when you enter the code to blogspot, does it put the "[ URL ]" and "[ /URL ]" in? It shouldn't be? It's hard to tell if DGrin is adding it automatically to your pasted code

<iframe src="http://douglasgood.smugmug.com/frame/slideshow?key=QvpBKj&navigation=1" width="800" height="600" frameborder="0" scrolling="no"></iframe>

[EDIT] I checked your source code on your blogspot and everything looks OK. Strange!

Hello Aaron,
I do not see those indicators in my BlogSpot entry.
It looks like you were able to check my source code and found nothing wrong with it.
Doug

Allen · November 11, 2014

leftquark wrote: »

This is going to be a little silly of a question, but when you enter the code to blogspot, does it put the "[ URL ]" and "[ /URL ]" in? ...

That's exactly what I thought as I got it to work in blogger also for IE.

DougG · November 11, 2014

Allen wrote: »

That's exactly what I thought as I got it to work in blogger also for IE.

I do not understand the url, /url discussion.
What am I missing?

Allen · November 11, 2014

DougG wrote: »

I do not understand the url, /url discussion.
What am I missing?

I saw your post #10 and the link had ellipses "..." in the middle of it. As a admin I clicked edit to copy
the whole link. I saw the [URL] tags in it and thought maybe you had used it. It would have been a
simple mistake although a long shot. This is what you had below. With the tags Dgrin auto changed it
to an actual link. Because it was shortened with the ... in the middle the full link could not be copied.

<iframe src="[URL]http://www.douglasgoodphotography.com/frame/slideshow?key=84QLZx&navigation=1[/URL]" width="800" height="600" frameborder="0" scrolling="no"></iframe>

When I post a link that would probably be copied I "bold" the colon and period. This allows the whole
link to show and not be shortened by Dgrin. And it can be copied.
http://...aphy.com/fra...
http://www.douglasgoodphotography.com/frame/slideshow?key=84QLZx&navigation=1

Also notice above on the iframe code I bolded both [ so the [URL] did not activate.[/url]

DougG · November 12, 2014

Allen wrote: »

I saw your post #10 and the link had ellipses "..." in the middle of it. As a admin I clicked edit to copy
the whole link. I saw the [URL] tags in it and thought maybe you had used it. It would have been a
simple mistake although a long shot. This is what you had below. With the tags Dgrin auto changed it
to an actual link. Because it was shortened with the ... in the middle the full link could not be copied.

<iframe src="[URL]http://www.douglasgoodphotography.com/frame/slideshow?key=84QLZx&navigation=1[/URL]" width="800" height="600" frameborder="0" scrolling="no"></iframe>

When I post a link that would probably be copied I "bold" the colon and period. This allows the whole
link to show and not be shortened by Dgrin. And it can be copied.
http://...aphy.com/fra...
http://www.douglasgoodphotography.com/frame/slideshow?key=84QLZx&navigation=1

Also notice above on the iframe code I bolded both [ so the [URL] did not activate.[/url]

Good morning Allen,
Thank you for taking the time to explain the comment.
I am truly a rookie when it comes to HTML.
I take it from the observations from you, Aaron, and Denise that you can see nothing wrong with the code I am using, but nevertheless it doesn't work.
So thank you all very much for your time and patience with me, but I am going to remove the post from my blog and write it off as a nice try, but no cigar.

MonarchHousing · November 12, 2014

Image Size
I found this an option that I needed as the swf slideshow was not working on my iphone.

This works but with the same width and height the images are much smaller.

This is the original iframe for the SWF:

<div style="clear: both; width: 575px;"><iframe src="http://herbglenn.smugmug.com/photos/swfpopup.mg?AlbumID=45628961&AlbumKey=qPR7xW" width="575" height="450"></iframe></div>

This is what is what I am now using.

<div style="float: right; margin: 0 0px 5px 20px;"><iframe src="http://herbglenn.smugmug.com/frame/slideshow?key=qPR7xW" width=“575” height=“450” frameborder="0"
scrolling="no"></iframe></div>

The images are now very small. The link shows how they looked on the old format. The link to my site is: http://monarchhousing.org/2014/11/12...nce=1079786b0e

http://monarchhousing.org/wp-content...1.52.08-PM.png

Any suggestions would be appreciated.

Non-Flash embeddable slideshow?

Comments