• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization New - JFriend HTML5 Slideshow beta release!

Need some help with your New SmugMug Site?

Dgrin Challenges

They're back! Our latest series of Dgrin Challenges, the OOYCZ Challenges (Out of Your Comfort Zone), is a series of challenges to help you improve your photography by stepping out of your comfort zone and trying something new. Our challenge leader says "Consider it like a photography class with no diplomas.". Get started with OOYCZ by reading the Challenge Guide.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  184
Old Jan-21-2011, 07:43 PM
#1
jfriend is offline jfriend OP
Scripting dude-volunteer
New - JFriend HTML5 Slideshow beta release!
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question

Last edited by jfriend; Dec-04-2012 at 07:27 PM.
Old Jan-21-2011, 08:11 PM
#2
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by jfriend View Post
,,,
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?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-21-2011, 08:14 PM
#3
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 08:43 PM
#4
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
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.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-21-2011, 09:04 PM
#5
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by Allen View Post
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.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor

Last edited by Allen; Jan-21-2011 at 09:15 PM.
Old Jan-21-2011, 09:29 PM
#6
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question

Last edited by jfriend; Jan-21-2011 at 09:56 PM.
Old Jan-21-2011, 10:00 PM
#7
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by jfriend View Post
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
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-21-2011, 10:04 PM
#8
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 10:13 PM
#9
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 10:17 PM
#10
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by jfriend View Post
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!
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-21-2011, 10:19 PM
#11
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 10:42 PM
#12
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by jfriend View Post
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.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-21-2011, 10:48 PM
#13
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 11:00 PM
#14
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 11:32 PM
#15
Tipsy is offline Tipsy
Big grins
Tipsy's Avatar
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
__________________
http://tayookusanya.com
Old Jan-21-2011, 11:37 PM
#16
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Tipsy View Post
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".
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-21-2011, 11:51 PM
#17
Tipsy is offline Tipsy
Big grins
Tipsy's Avatar
Quote:
Originally Posted by jfriend View Post
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.
__________________
http://tayookusanya.com
Old Jan-21-2011, 11:58 PM
#18
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Tipsy View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jan-22-2011, 01:30 AM
#19
peestandingup is offline peestandingup
Major grins
peestandingup's Avatar
Quote:
Originally Posted by Allen View Post
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??
Old Jan-22-2011, 01:37 AM
#20
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by peestandingup View Post
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.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Page 1  of  184
Tell The World!  
Tags
advanced , custom header , flash , help me , slideshow
Similar Threads Thread Starter Forum Replies Last Post
JFriend HTML5 Slideshow Linisa Legacy SmugMug Customization 3 Sep-10-2011 04:57 AM
JFriend Slideshow Covering up Main body and smugmug navbar stormy315 Legacy SmugMug Customization 1 Aug-15-2011 04:47 PM
Clean up bio before installing JFriend HTML5 slideshow DougG Legacy SmugMug Customization 6 Jun-03-2011 12:00 PM
New BETA release onethumb SmugMug Support 64 Jan-10-2007 05:14 PM
Adobe Camera Raw 2.4 beta (update-full release 1/31/05) patch29 The Big Picture 3 Jan-31-2005 02:12 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump