Non-Flash embeddable slideshow?

Allen

Assume this is the link without "preview" view.
http://monarchhousing.org/2014/11/12/love-notes-jazz-photosvideos

The sizes looks ok to me.

BigMamma

Security - Downloading
Hi there -
Thanks so much for posting this code! I clicked on your website link and noticed that the photos in the slideshow are protected from right click download. Is this something special that you added to the code? I want to be sure that no one can right click on my photos and download them from the slideshow. I also want to be sure that no one is driven off my website (and to smugmug slideshow) when the click on one of the photos in the slideshow. Is this also something special tha tyou ahve added to your code?
Thanks!!

leftquark wrote: »

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
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}

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

leftquark

BigMamma wrote: »

Hi there -
Thanks so much for posting this code! I clicked on your website link and noticed that the photos in the slideshow are protected from right click download. Is this something special that you added to the code? I want to be sure that no one can right click on my photos and download them from the slideshow. I also want to be sure that no one is driven off my website (and to smugmug slideshow) when the click on one of the photos in the slideshow. Is this also something special tha tyou ahve added to your code?
Thanks!!

It's following the settings that I've chosen in my SmugMug gallery. Right click protection can be turned on in your gallery settings.

BigMamma

leftquark wrote: »

It's following the settings that I've chosen in my SmugMug gallery. Right click protection can be turned on in your gallery settings.

Thanks so much for your help! I have tried this with no luck. What am I doing wrong? I am a total novice. I was just following the various instructions that I read on-line...

<iframe src="http://[MYSMUGMUGPAGE].smugmug.com/frame/slideshow?key=JGcxFs&playButton=1&navigation=1&clickToImage=0&captions=0&crossFadeSpeed=350&quot; width="550" height="300" frameborder="0" scrolling="no"></iframe>

BigMamma

When I was looking around the web for help on this topic. I found this:
http://smugshowbuilder.appspot.com/

I think that this is on point so I figured I would add it to the discussion. I tried it and I managed to get the full-screen slide URL link to work but not the HTML code for the embedded slideshow. For the latter, I can't tell if it is just an issue with the preview though. I have not tried to put the link on my website yet. When I do I will update my discussion.

denisegoldberg

BigMamma wrote: »

When I was looking around the web for help on this topic. I found this:
http://smugshowbuilder.appspot.com/

Not sure if this is on point but I thought I would add it to the discussion. I wasn't entirely sure how to use it so I have not tried it myself.

That's very old and refers to a flash slideshow as of 4 years ago, not applicable to new smug and possibly no longer applicable to legacy.

--- Denise

BigMamma

denisegoldberg wrote: »

That's very old and refers to a flash slideshow as of 4 years ago, not applicable to new smug and possibly no longer applicable to legacy.

--- Denise

I tried this and it didn't work....

<iframe src="http://[WEBSITE].smugmug.com/frame/slideshow?key=JGcxFs&quot;

width="800" height="600" frameborder="0" scrolling="yes"></iframe>

Not sure what I am doing wrong.

Then I spent a bit of time on-line looking for another solution and found this: http://smugshowbuilder.appspot.com/

I tried it out and was able to build full screen slideshow URL. The preview for the embedded slideshow didn't seem to work for me - I couldn't see the photos but I could see everything (including the thumbs). Not sure what I am doing wrong but in any event I have not yet tried the URL link on my website. Figured I would add the info to this discussion though. Maybe it is helpful.

kofa

It could be a number of things. If you use a content manager system (CMS) like Drupal, you may have to configure it to allow the iframe tag in content. Also, make sure you're adding this to the HTML source, not simply as text. I'm sorry for the trivial tips, I don't know enough about your site. For me, the following works:

Allen

BigMamma wrote: »

I tried this and it didn't work......

What site are you trying this on? Smugmug or a different site?

leftquark

BigMamma wrote: »

Thanks so much for your help! I have tried this with no luck. What am I doing wrong? I am a total novice. I was just following the various instructions that I read on-line...

<iframe src="http://[MYSMUGMUGPAGE].smugmug.com/frame/slideshow?key=JGcxFs&playButton=1&navigation=1&clickToImage=0&captions=0&crossFadeSpeed=350&quot; width="550" height="300" frameborder="0" scrolling="no"></iframe>

I know it's a little confusing to figure out what parts of the code to replace with what. We still need to find a place for us to auto-generate the code for you....

In the code you pasted in you'll need to replace "[MYSMUGMUGPAGE]" with the link to your actually SmugMug page. In your case: "teamfranklin".

It also appears that the gallery ID you linked ("JGcxFs") isn't valid. If you could send me a link to the gallery you want to turn into a slideshow, I'll generate the code for you!

BigMamma

denisegoldberg wrote: »

That's very old and refers to a flash slideshow as of 4 years ago, not applicable to new smug and possibly no longer applicable to legacy.

--- Denise

Thank you. I haven't tried the link yet on my external (non-smugmug) website yet. For various reasons, I am still using the legacy smugmug. Maybe I will get lucky and it will work. If it does, I will let you know.

BigMamma

leftquark wrote: »

I know it's a little confusing to figure out what parts of the code to replace with what. We still need to find a place for us to auto-generate the code for you....

In the code you pasted in you'll need to replace "[MYSMUGMUGPAGE]" with the link to your actually SmugMug page. In your case: "teamfranklin".

It also appears that the gallery ID you linked ("JGcxFs") isn't valid. If you could send me a link to the gallery you want to turn into a slideshow, I'll generate the code for you!

I have two smugmug accounts. I am using a different one. Is it possible to send you a private message? I use the smugmug account to hold school photographs. We then post the photographs on the school website. We were using the easy link but then realized that no one could see the photos because of the flash issue. (Everyone uses iPhones and iPads now.)

leftquark

BigMamma wrote: »

Is it possible to send you a private message?

Definitely! Just click on my name over on the left ("leftquark") and choose "Send a private message to leftquark". If you include the link I'll help ya generate the code!

kofa

The easiest way I've found to get the album key is to look at the link to a slideshow via Get a Link -> Gallery Links -> Slideshow, e.g.
http://photos.kovacs-telekes.org/photos/swfpopup.mg?AlbumID=46131664&AlbumKey=rpw5b7
I can then turn this into
<iframe scrolling="no" src="http://kovacs-telekes.smugmug.com/frame/slideshow?key=rpw5b7" frameborder="0" height="600" width="800"></iframe>

karlhaus

NON FLASH Embeddable slideshow

leftquark wrote: »

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:
...

fine and dandy but too basic. Does not have thumbnails of the images to help navigate. This feature alone makes it unusable for slide shows of over 5-10 images. Mine usually have 60-80... Need something like slidemypics.com which does not work with smugmug any longer...

Allen

Is there a complete list of parameters and their settings?

leftquark

Allen wrote: »

Is there a complete list of parameters and their settings?

I think I've got the full list here. Options are 0 or 1 for most things, or seconds.

http://www.dgrin.com/showpost.php?p=1975681&postcount=3

You can add the following additional parameters to the URL:
&autoStart=0 (options: 0 = no auto start, 1 = auto-start)
&captions=1 (options: 0 = no caption, 1 = captions)
&navigation=1 (options: 0 = no left/right navigation arrows, 1 = arrows)
&playButton=1 (options: 0 = no play button on start, 1 = play button)
&speed={SECONDS} (options: enter whole number of seconds)
&transition=none (use this or totally remove. adding this makes it so the photo instantly changes)
&transitionSpeed={SECONDS} (options: enter whole number of seconds)

Allen

leftquark wrote: »

I think I've got the full list here. Options are 0 or 1 for most things, or seconds.

http://www.dgrin.com/showpost.php?p=1975681&postcount=3

You can add the following additional parameters to the URL:
&autoStart=0 (options: 0 = no auto start, 1 = auto-start)
&captions=1 (options: 0 = no caption, 1 = captions)
&navigation=1 (options: 0 = no left/right navigation arrows, 1 = arrows)
&playButton=1 (options: 0 = no play button on start, 1 = play button)
&speed={SECONDS} (options: enter whole number of seconds)
&transition=none (use this or totally remove. adding this makes it so the photo instantly changes)
&transitionSpeed={SECONDS} (options: enter whole number of seconds)

Thanks, I was hoping it would be extensive as the old flash show.

karlhaus

Too Basic
How about adding thumbnails for ease of navigation? - your "solution" is only good for very small galleries, for larger galleries (10+ images,) forces the user to step through each image, wait for it to load, etc, rather than jumping to a desired one. The end result is a frustrated user and a useless gallery.

jemostrom

I really like the new slideshow but as a few have pointed out: it would be even better if it was possible to have some kind of thumbnails for navigation.

jbmcclain

remove back to gallery
How would you remove back to gallery icon?

Thanks!

leftquark

I've created a little tool (it's very rough, please excuse the edges, I'm rushing to head out on vacation) that will automatically generate the HTML required for the HTML5 slideshow. All you need to do is copy the "Slideshow URL" from the "Get a Link" page, and paste it in, and my tool will generate the HTML for you.

It can be found here: http://www.aaronmphotography.com/Customizations/Gallery/HTML5-Slideshow

brssjunk

Embeddable Slideshow with randomization?
Is there something that I can put in the code above to make it randomize the starting image and the sort order. While Smugmug has added an app to create the embeddabale slide show, it doesn't include this most important parameter!

leftquark

Not at this time, but I'll see how difficult it would be to add.

sarasphotos

I've been crying for the slideshow navigation thumnails for years.

CHeers, Sara

Allen

Is there any way to code the embeddabale show so it resizes with browser/pad/phone screen size?

TourKick

WordPress Plugin - TK SmugMug Slideshow Shortcode
I created https://wordpress.org/plugins/tk-smugmug-slideshow-shortcode/
It makes it responsive (100% width) but has customizable width and height.
I hope you like it.