The "JFriend HTML5 Slideshow" is now available!

Download site, full documentation (38 pages) and tutorial are here.

[[New Version 1.2.0 released on October 21, 2012 for compatibility with IE10]].
Instructions for upgrading from a previous version of this slideshow here.

Would you be interested in any of these things:

1. A slideshow that loads 3-10x faster than the Smugmug slideshow. No waiting. Splash screen comes up instantly.
2. Snazzy slideshow transitions (fades, wipes, reveals, flips, scales, etc...)
3. A slideshow that has full functionality without Adobe flash. No flash version headaches for your viewers. No flash loading time. No flash install issues.
4. A slideshow that works in browsers that don't have flash.
5. A slideshow that automatically sizes itself to a mobile screen and works on Android phones, Android tablets, iPhone, iTouch, iPad, etc...
6. A slideshow that's fully customizable with more than 50 customization options and further customization with CSS.
7. A slideshow that can automatically stretch/scale itself to display the largest images possible.
8. A slideshow that uses the latest and greatest features of CSS3 and HTML5 (when available) to give you a snazzy up-to-date look, but still works on old browsers like IE6 and Firefox 2.
9. Let me say this again. 100% javascript, CSS and HTML. No Adobe flash.
10. Color managed slideshow display for accurate color on a color calibrated system in a color-management-capable browser (like Safari or Firefox).
11. The slideshow can be inserted on any page in your site (homepage, category page, sub-category page, gallery description, etc...) with only a few lines of activation code.
12. Tested in Firefox (v2-v5), Safari (v4-v5), IE6-IE9, Opera (v10-v11), Android (2+), iPad, iTouch, iPhone, Chrome (v8-12).

If you are interested in any of these great new capabilities, then you may want to explore a new slideshow created just for Smugmug web sites.

Go here to the download site to learn more. There are demo sites, a longer list of features, tutorial and reference documents and, of course, the actual slideshow code to install on your site.

If you have any troubles or questions, just post to this thread and I'll be happy to look into any issues. This is a beta release, but I've been running it on my own Smugmug homepage for a couple months without issue and a lot of other people are now running it. So, I think it's pretty solid - I'm just not going to call it a full release quite yet.

Oh, if you have a chance be sure to check out either of the demo slideshows in either Safari, Chrome, Opera or Firefox 4 (beta). In those new browsers, you'll see the new and cool CSS3/HTML5 slideshow transitions that leverage the latest browser capabilities.

Have at it and let me know how it goes!

P.S. To those who are currently running my stretchy slideshow, this is a replacement for that. The original stretchy slideshow was built on top of the Smugmug Flash slideshow. This new slideshow replaces all that and offers a lot of new functionality.

Originally Posted by jfriend ,,,

You used the full gallery url including the photo number at the end. Wouldn't
it be safer if the #photo number is left off? It could easily change with a new
photo upload or sorting. Or does javascript ignore that part?

JF.InsertSlideshow({ galleryURL: "http://jfriend.smugmug.com/Portfolio/Signs/879691_ybBJZ#39801650_zYreW",

Also, will relative links work?

Originally Posted by Allen You used the full gallery url including the photo number at the end. Wouldn't it be safer if the #photo number is left off? It could easily change with a new photo upload or sorting. Or does javascript ignore that part? JF.InsertSlideshow({ galleryURL: "http://jfriend.smugmug.com/Portfolio/Signs/879691_ybBJZ#39801650_zYreW",

The javascript strips that off and parses out the galleryID and galleryKey from whatever you put in there. The imageID and key after the # is not used. The domain is not used. Relative links will work also. It's just looking for galleryID_galleryKey near the end. I wanted people to be able to just go to a gallery and copy whatever was in the URL bar and not worry about editing it or understanding it. It works equally well as:

http://jfriend.smugmug.com/Portfolio/Signs/879691_ybBJZ#39801650_zYreW

or

http://jfriend.smugmug.com/Portfolio/Signs/879691_ybBJZ

or you can just specify the galleryKey and galleryID directly if you want. I'm just trying to make it more foolproof for rookie customizers.

Couple observations (if you don't mind )

Noticed that it doesn't run in an unlisted gallery, only logged in. That would
not be good for all those using unlisted html type info pages if they wanted a
show to run there. Example, I have two running on my Guestbook page.

Also got message that there were no public photos available in gallery when I
accidentally put in an unlisted gallery source. Those that use an unlisted
gallery just for show photos would be out of luck.

Originally Posted by Allen Couple observations (if you don't mind ) Noticed that it doesn't run in an unlisted gallery, only logged in. That would not be good for all those using unlisted html type info pages if they wanted a show to run there. Example, I have two running on my Guestbook page. Also got message that there were no public photos available in gallery when I accidentally put in an unlisted gallery source. Those that use an unlisted gallery just for show photos would be out of luck.

Looks like after making the gallery public it still only runs logged in.
http://www.photosbyat.com/Birds/Bird...15540271_ybJWJ

The source gallery is public.
I can't seem to find a way to center the show either.
Edit: got it centered.

Originally Posted by Allen Looks like after making the gallery public it still only runs logged in. http://www.photosbyat.com/Birds/Bird...15540271_ybJWJ The source gallery is public. I can't seem to find a way to center the show either. Edit: got it centered.

It appears that there is no albumDescription object in the page when the gallery is empty and you're not logged in so the code can't find any place to put the slideshow. Perhaps it needs either something in the gallery description or a photo in the gallery (I'm not sure) in order to be present.

You could insert the slideshow after the breadcrumb because that is present.

Originally Posted by Allen I can't seem to find a way to center the show either. Edit: got it centered.

I can't center it either. Anyone know??

Originally Posted by Allen Couple observations (if you don't mind ) Noticed that it doesn't run in an unlisted gallery, only logged in. That would not be good for all those using unlisted html type info pages if they wanted a show to run there. Example, I have two running on my Guestbook page. Also got message that there were no public photos available in gallery when I accidentally put in an unlisted gallery source. Those that use an unlisted gallery just for show photos would be out of luck.

I'll look into the issue with an unlisted gallery - definitely want that to work. Thanks for pointing that out.

Originally Posted by jfriend I'll look into the issue with an unlisted gallery - definitely want that to work. Thanks for pointing that out.

It's working in an unlisted gallery now. It's the source gallery being unlisted
that's in question.

Just checked Safari, much nicer transitions. But my red Cardinals come out orange. YUK!

Originally Posted by Allen You used the full gallery url including the photo number at the end. Wouldn't it be safer if the #photo number is left off? It could easily change with a new photo upload or sorting. Or does javascript ignore that part? JF.InsertSlideshow({ galleryURL: "http://jfriend.smugmug.com/Portfolio/Signs/879691_ybBJZ#39801650_zYreW", Also, will relative links work?

Under my homepage slideshow: www.scubahead.com, I have setup the 'Random Start' and 'Randomize' under Slideshow Settings to 'Yes' but it is not working. The slideshow starts on the first image and slideshow in sequencial order but not random start and randomize. It could be in the Advance Customization code or somewhere that prevents this slideshow to random start and randomize. Any help is greatly appreciated. Thanks.

Originally Posted by divefishski Under my homepage slideshow: www.scubahead.com, I have setup the 'Random Start' and 'Randomize' under Slideshow Settings to 'Yes' but it is not working. The slideshow starts on the first image and slideshow in sequencial order but not random start and randomize. It could be in the Advance Customization code or somewhere that prevents this slideshow to random start and randomize. Any help is greatly appreciated. Thanks.

You appear to be using the Fastline media slideshow. That is a different slideshow than the JFriend HTML5 slideshow that this thread is about. See this thread for questions about the Fastline media slideshow.

Originally Posted by jfriend You appear to be using the Fastline media slideshow. That is a different slideshow than the JFriend HTML5 slideshow that this thread is about. See this thread for questions about the Fastline media slideshow.

Thanks, I reposted it there..

Well I'm stumped, been trying for two days John to get the slideshow to show on my front page. It shows fine when logged in but as soon as I am logged out it disappears. Thoughts?

Originally Posted by cjmchch Well I'm stumped, been trying for two days John to get the slideshow to show on my front page. It shows fine when logged in but as soon as I am logged out it disappears. Thoughts?

Change the end of the code to this and see if it works. Make sure the bio
is checked under the "homepage layout" button. If it doesn't work put
something in the biobox.

"#userBio"
);

like this

"#bioBox",
"after"
);

Originally Posted by cjmchch Well I'm stumped, been trying for two days John to get the slideshow to show on my front page. It shows fine when logged in but as soon as I am logged out it disappears. Thoughts?

Your activation code says to put the slideshow in your userBio (part of the bio), but you don't have the bioBox on your homepage. Enable your biobox in the homepage layout button and make sure that the bioBox is not empty. Trying putting this in it:

<html><div></div></html>

I will make the doc a lot clearer on how to do this. Sorry about that. I think I'll make the homepage slideshow not depend upon the biobox at all.

Thanks John, fixed.

Originally Posted by cjmchch Thanks John, fixed.

Looks really nice and loads so quickly.

I'm more than happy with it. Now I can start uploading some decent images and remove the rubbish.

You deserve a huge vote of thanks. I hope that SmugMug provides you (and the other stalkers like Allen, Denise...etc in the customization area) with generous benefits for all the hard work and advice you give - and freely! I am sure without the information you guys provide SmugMug wouldn't be half the host that it is today.

Thank You

Hello everbody!

I need some help on my page with the supersize slideshow.
I've just copied the css und javascript but the slideshow doesn't work :-(

I guess there is a problem with the previous stretchy slideshow codes on my site. :-((

Has anyone a idea and can help me.

Here is the link to my page
www.fototourist.net

Thank you for your help!
Stefan

Originally Posted by fototourist Hello everbody! I need some help on my page with the supersize slideshow. I've just copied the css und javascript but the slideshow doesn't work :-( I guess there is a problem with the previous stretchy slideshow codes on my site. :-(( Has anyone a idea and can help me. Here is the link to my page www.fototourist.net Thank you for your help! Stefan

See posts 66 and 67.

You also have a javascript error here
AlbumID is not defined
// Facebook button
if (SM) {
var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;