Non-Flash embeddable slideshow?

kdizzkdizz Registered Users Posts: 15 Big grins
edited November 18, 2015 in SmugMug Feature Requests
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?
«1

Comments

  • tomnovytomnovy Registered Users Posts: 1,101 SmugMug Employee
    edited 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.
    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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:
    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 (in this example, the "kFDt2C")
    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:
    8. <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/
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • kofakofa Registered Users Posts: 73 Big grins
    edited November 10, 2014
    Great news, thank you!
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 10, 2014
    You only need the ..... with the appropriate code inside.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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}}&quot; width="{width}" height="{height}" frameborder="0" scrolling="no"></iframe>
  • kofakofa Registered Users Posts: 73 Big grins
    edited 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.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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}}&quot; 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!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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&quot; 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.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 11, 2014
    Doug, Can you post a link to your site so I can take a look?
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • DougGDougG Registered Users Posts: 51 Big grins
    edited November 11, 2014
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited November 11, 2014
    DougG wrote: »
    Doug -
    Your slideshow shows in your blog for me. Is it not showing for you on all browsers?

    --- Denise
  • DougGDougG Registered Users Posts: 51 Big grins
    edited November 11, 2014
    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.
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited 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
  • DougGDougG Registered Users Posts: 51 Big grins
    edited November 11, 2014
    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
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited November 11, 2014
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited November 11, 2014
    leftquark wrote: »
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited 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
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited 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
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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.


    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>
    
    
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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 :(

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

    [EDIT] I checked your source code on your blogspot and everything looks OK. Strange!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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&quot; 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
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited 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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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?
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited 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]
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • DougGDougG Registered Users Posts: 51 Big grins
    edited 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.
  • MonarchHousingMonarchHousing Registered Users Posts: 1 Beginner grinner
    edited 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&quot; 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&quot; 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.
Sign In or Register to comment.