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

I added "after" then some text in the albumDescription and the unlisted
gallery now runs logged out also.

Looks real good, fun to play with.
I'll try unlisted gallery next. Ok, works with unlisted gallery now.
http://www.photosbyat.com/Birds/Bird...15540271_ybJWJ

Originally Posted by Allen I added "after" then some text in the albumDescription and the unlisted gallery now runs logged out also. Looks real good, fun to play with. I'll try unlisted gallery next. Ok, works with unlisted gallery now. http://www.photosbyat.com/Birds/Bird...15540271_ybJWJ

Looks great! You have a lot of nice shots.

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

Odd. Safari should be color managed. Are you getting different color in Safari vs. Firefox? This should be another advantage over the flash slideshow too (color management) since flash doesn't have color management.

Originally Posted by jfriend Odd. Safari should be color managed. Are you getting different color in Safari vs. Firefox? This should be another advantage over the flash slideshow too (color management) since flash doesn't have color management.

Picking the same spot using ColorPix

Safari
D65536
FF3.6.13
FF422F
IE8
FF422F
ColorPix red is picked as this and it looks red on my screen.
FF0000

So the D65536 vs FF422F is quite different.

Originally Posted by Allen Picking the same spot using ColorPix Safari D65536 FF3.6.13 FF422F IE8 FF422F ColorPix red is picked as this and it looks red on my screen. FF0000 So the D65536 vs FF422F is quite different.

I'm not sure what to make of that. FF 3.6 and Safari are color management capable by default (if it's not disabled). IE8 is not color managed so it's odd that you would get the same results in FF and IE and you would like them better than Safari. On my system, I can see Firefox and Safari the same and IE8 different and oversaturated.

Originally Posted by Allen 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!

I'm not having trouble with an unlisted source gallery. The slideshow does need external linking enabled on the source gallery, but it shouldn't matter if the source gallery is unlisted or not as long as you have the right galleryID and galleryKey in the URL. Can you share the link to an unlisted gallery that isn't working for you so I can try it here? Or if you don't want the link public, email it to me via my dgrin profile or my homepage contact link.

Hello John,

This is great. Well done. It seems to work well for me when I'm logged in. It stops working immediately I log out. I must have done something wrong that I cant figure out.

Tayo

Originally Posted by Tipsy Hello John, This is great. Well done. It seems to work well for me when I'm logged in. It stops working immediately I log out. I must have done something wrong that I cant figure out. Tayo

You're trying to insert the slideshow into your bio, but the bio is not on your homepage (at least when you're logged out) so there's no place to put the slideshow. You can either enable the bio in the homepage layout button or you can change where you're putting the slideshow and use "#homepageBoxes" instead of "#userBio".

Originally Posted by jfriend You're trying to insert the slideshow into your bio, but the bio is not on your homepage (at least when you're logged out) so there's no place to put the slideshow. You can either enable the bio in the homepage layout button or you can change where you're putting the slideshow and use "#homepageBoxes" instead of "#userBio".

Thanks. You're a genius. It works well on Chrome, Safari, Safari Iphone, Opera Mini on the Iphone and firefox.

Originally Posted by Tipsy Thanks. You're a genius. It works well on Chrome, Safari, Safari Iphone, Opera Mini on the Iphone and firefox.

Great. Hadn't tried Opera Mini myself.

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 peestandingup I can't center it either. Anyone know??

Add this CSS:

.slideshowContainer {margin: 0 auto;}

I think I'll add that to the default CSS for the slideshow so it's centered by default.