• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization JFriend HTML5 Slideshow Upgrade - mandatory for IE 10 support

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
Old Oct-22-2012, 09:24 PM
#1
jfriend is offline jfriend OP
Scripting dude-volunteer
JFriend HTML5 Slideshow Upgrade - mandatory for IE 10 support
Reposted with a corrected title...

Today (Oct. 21, 2012), version 1.2.0 of the JFriend HTML5 slideshow has been released and is available at the normal slideshow download site. This version is a required upgrade if you want your JFriend HTML5 Slideshow to work in IE 10 which is being released with Windows 8 on Oct. 26, 2012.

The good news about IE 10 is that it now supports CSS3 transitions so we can have the same slideshow support in IE 10 that we've had for a couple years in other modern browsers.

The bad news about IE 10 is that they removed some IE-specific capabilities from IE 10 that the JFriend HTML5 slideshow was using (in versions earlier than this new one). That means that if you are currently using any version of the JFriend HTML5 slideshow before 1.2.0, then your slideshow will not work properly in IE 10. No problem. Upgrade your code to version 1.2.0 and it will work seamlessly with IE 10 when it is released.

To install the slideshow from scratch (if you don't already have the slideshow installed), go to the Slideshow download site and follow the directions from scratch.

To upgrade your existing JFriend HTML5 slideshow to this new version, you simply need to replace three pieces of your customization with the new code for version 1.2.0. To do that, follow these instructions:
  1. Open the advanced customizer screen on your Smugmug site. As of 10/2012 (Smugmug has changed it recently), you can do that by going to your homepage and selecting the Tools button, Account Settings/Style/Advanced Customizer/Manage. This presents you with a number of editable text boxes. You need to replace the existing slideshow in three of these boxes with the new, upgraded slideshow code. Be very careful when doing this because if you have other customizations, you do not want to accidentally remove them. The following instructions will walk you through how to do that carefully.
  2. First, make a backup. You can do that by scrolling to the bottom of the Advanced Customizer window and selecting the Email It! button. This will instruct Smugmug to email you a combined copy of everything you currently have in your customization so if anything gets goofed up while editing it, you can use that to recover.
  3. In the box labeled CSS, remove the existing CSS for the JFriend HTML5 slideshow. This CSS is marked with a comment at the start and end like this:

    Code:
    /*----------------------------------------------------------------------
     Start of JFriend HTML5 Slideshow CSS
     
     Copyright John Friend, 2011-2012, All Rights Reserved
     Limited permission is granted to use this code on Smugmug
     Version 1.x.x
    ------------------------------------------------------------------------ */
    
    CSS Contents are Here
    
    /*----------------------------------------------------------------------
     End of JFriend HTML5 Slideshow CSS
    
     Copyright John Friend, 2012-2012, All Rights Reserved
     Limited permission is granted to use this code on Smugmug
    ------------------------------------------------------------------------ */
    Remove all that Slideshow CSS including the comments at beginning and end. Again, do not remove anything else that you may have put in the CSS box and make sure you make a 100% accurate selection to get exactly the right characters before deletion.
  4. Scroll down to the section labelled "Top Javascript" and repeat the same to remove the old version of the top javascript that is between these comments (also delete the commemts too):

    Code:
    //----------------------------------------------------------------
    // Start of JFriend HTML5 Slideshow code in top javascript
    //
    // Copyright John Friend, 2011-2012, All Rights Reserved
    // Limited permission is granted to use this code on Smugmug
    // Version 1.x.x
    //----------------------------------------------------------------
    
    code here
    
    //----------------------------------------------------------------
    // End of JFriend HTML5 Slideshow Code in top javascript
    // 
    // Copyright John Friend, 2011-2012, All Rights Reserved
    // Limited permission is granted to use this code on Smugmug
    //----------------------------------------------------------------
  5. Scroll down to the section labelled "Bottom Javascript" and repeat the same to remove the old version of the bottom javascript that is between these comments (also delete the commemts too):

    Code:
    //----------------------------------------------------------------
    // Start of JFriend HTML5 Slideshow code
    //
    // Copyright John Friend, 2011-2012, All Rights Reserved
    // Limited permission is granted to use this code on Smugmug
    // Version 1.x.x
    //----------------------------------------------------------------
    
    code here
    
    //----------------------------------------------------------------
    // End of JFriend HTML5 Slideshow Code
    // 
    // Copyright John Friend, 2011-2012, All Rights Reserved
    // Limited permission is granted to use this code on Smugmug
    //----------------------------------------------------------------
  6. In a second browser window, open the Slideshow Download Site.
  7. Scroll down until you find a button labeled "Copy Bottom Javascript" and press that button. The bottom javascript code has now been copied to your computer's clipboard.
  8. Go back to the Advanced Customizer browser window and locate the text box for the bottom javascript. Position the cursor in that text box at the end of the text box and paste the new bottom javascript into that box.
  9. Go back to the Slideshow download site and click on the button labeled "Copy Top Javscript".
  10. Go back to the Advanced Customizer browser window and located the text box for the top javascript. Position the cursor in that text box at the end of the text box and paste the new top javascript into that box.
  11. Go back to the Slideshow download site and click on the button labeled "Copy CSS".
  12. Go back to the Advanced Customizer browser window and located the text box for the CSS. Position the cursor in that text box at the end of the text box and paste the new CSS into that box.
  13. Finally, to save all this to your Smugmug site, hit the Update button at the bottom of the Advanced Customizer window. When doing so, be patient and wait for it to work. It sometimes takes 5-20 seconds for all the new code to upload (you can often see progress in the browser status bar). When the upload appears to be complete, scroll up to the top of the result browser page to make sure that Smugmug did not report any errors. Sometimes they want you to login again or want you to just hit the Upload button again.
  14. Check the pages that contain slideshows and make sure that everything is still working as expected.
  15. Once you are satisified that it is working as expected, then return to the Advanced Customizer page and hit the "Email It" button again to instruct Smugmug to email you another backup copy of your customizations.

    Your JFriend HTML5 slideshow should be upgraded to version 1.2.0 and you now have full support for IE 10 when your viewers start using that new browser.
__________________
--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 Oct-29-2012, 11:42 PM
#2
jfriend is offline jfriend OP
Scripting dude-volunteer
Just a reminder to everyone that IE10 has now shipped in Windows 8. If you are using my JFriend HTML5 slideshow on your site, you NEED to upgrade your code so your slideshow will work in IE10 on Windows 8 (and on Windows 8 tablets like the Microsoft Surface tablet).
__________________
--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 Oct-30-2012, 03:50 PM
#3
ko04 is offline ko04
An Artist at heart
ko04's Avatar
Question about the new code I have all the transition hidden so I can then narrow down which ones I want to use but I'm still seeing ones that I don't want what am I doing wrong here? If you want I can start another post as to not flood this post with my question.
__________________
KO Photography
http://www.k-ophotography.com/
Old Oct-30-2012, 04:07 PM
#4
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by ko04 View Post
Question about the new code I have all the transition hidden so I can then narrow down which ones I want to use but I'm still seeing ones that I don't want what am I doing wrong here? If you want I can start another post as to not flood this post with my question.
Your homepage slideshow activation code is this:

Code:
<script type="text/javascript">
JF.InsertSlideshowHere({
    galleryURL: "http://k-ophotography.smugmug.com/Photography/Portfolio/21580387_C4PdMb#!i=1736497348&k=p7MpjpK" ,
    height: "400",
    width: "800",
    randomSlideStart: "true",
    randomSlideOrder: "true",
    useNativeSizesOnly: "false",
    superSize: "false"}
);
</script>
There is nothing there in your activation code that restricts the transitions that the slideshow can use. If you want to specify which transitions can be used, then add the transitionsList option to your activation code and specify which transitions you want to use. For example, adding this to your activation code will only allow the Fade transition:

transitionsList: "Fade",

Or, this will allow several transitions:

transitionsList: "Fade, RevealLeft, RevealRight, RevealFromCenter",
__________________
--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 Oct-30-2012, 04:11 PM
#5
ko04 is offline ko04
An Artist at heart
ko04's Avatar
Oh ok got it makes sense, I never had that in the old one thats what was throwing me off I will go ahead and do that now. Thanks for you help and this new update ROCKS so much faster and supper smooth great job!
__________________
KO Photography
http://www.k-ophotography.com/
Old Oct-30-2012, 06:21 PM
#6
MakeMeShutter is offline MakeMeShutter
ACCOUNT BANNED
MakeMeShutter's Avatar
Many thanks for the upgrade John!

Great Stuff!
__________________
Shawn Kraus Photo
Upstate New York Dragonflies And Damselflies
Old Nov-01-2012, 01:41 PM
#7
jfriend is offline jfriend OP
Scripting dude-volunteer
Bump - Reminder that anyone who has deployed the JFriend HTML5 slideshow must upgrade their code to the latest version (just released in Oct 2012) for compatibility with IE 10. The older version of the slideshow will not work properly in IE 10 which is now shipping with Windows 8.
__________________
--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 Dec-14-2012, 12:35 AM
#8
jfriend is offline jfriend OP
Scripting dude-volunteer
Bump to remind people again to upgrade their slideshow so it will work with IE 10.
__________________
--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 Mar-07-2013, 05:28 AM
#9
mhcooperphotography is offline mhcooperphotography
Big grins
Bump - just upgraded to IE10 for Win 7 - I think it just became available to everyone - and these instructions (to upgrade) worked like a charm. Thanks
Old Mar-10-2013, 06:24 PM
#10
myn91 is offline myn91
Beginner grinner
Not working...
I have upgraded the code to 1.2.0 (including the CSS) and it works fine in the old browsers. However in IE10 on windows 8, the splash image loads and transitions to the first image of the slide show and then nothing else happens. Not sure what I'm missing. Any suggestions?

Manuel
http://www.manueldiazphotography.com
Old Mar-10-2013, 09:27 PM
#11
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by myn91 View Post
I have upgraded the code to 1.2.0 (including the CSS) and it works fine in the old browsers. However in IE10 on windows 8, the splash image loads and transitions to the first image of the slide show and then nothing else happens. Not sure what I'm missing. Any suggestions?

Manuel
http://www.manueldiazphotography.com
Your slideshow is working fine here in Windows 8 / IE10. I'd suggest you clear your browser cache in case something old is stuck in the cache.
__________________
--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 Mar-13-2013, 02:34 PM
#12
DougG is offline DougG
Star-thrower
Just upgraded to IE10 on Windows 7
And upgraded to Version 1.2.0 of JFriend HTML Slideshow.....
Works perfectly.....
Instructions for upgrade to 1.2.0 are very clear....

Excellent job, John!
__________________
Doug
Douglas Good Photography
Old Mar-13-2013, 03:56 PM
#13
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by DougG View Post
And upgraded to Version 1.2.0 of JFriend HTML Slideshow.....
Works perfectly.....
Instructions for upgrade to 1.2.0 are very clear....

Excellent job, John!
Glad it worked so well for you.

The disappointing part to me is that people seem to be waiting to fix their site for IE10 until they personally have IE10. That means that everyone else who has IE10 already (even though you don't) is seeing your site as busted.

So, to everyone else, please upgrade your JFriend HTML5 slideshow so it works for everyone else who has IE10, now even if you will never have IE10 yourself.
__________________
--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 Mar-15-2013, 01:12 PM
#14
Allen is online now Allen
"tweak 'til it squeaks"
Allen's Avatar
IE10 was just added here by auto update. I had Version 1.2.0 installed some time ago
but the fullscreen slideshow button is black.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Mar-15-2013, 03:29 PM
#15
jfriend is offline jfriend OP
Scripting dude-volunteer
Quote:
Originally Posted by Allen View Post
IE10 was just added here by auto update. I had Version 1.2.0 installed some time ago
but the fullscreen slideshow button is black.
That is Smugmug's issue - apparently something to do with IE10 and flash. Nothing to do with the JFriend HTML5 slideshow.
__________________
--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 Mar-16-2013, 11:04 AM
#16
denisegoldberg is offline denisegoldberg
Major grins
denisegoldberg's Avatar
Quote:
Originally Posted by Allen View Post
IE10 was just added here by auto update. I had Version 1.2.0 installed some time ago
but the fullscreen slideshow button is black.
Allen -
Problem with slideshow button in IE10 has been known for a while. See thread Slideshow button is black.

--- Denise
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Jul-28-2013, 07:31 PM
#17
LouDoggsRuca is offline LouDoggsRuca
One day at a time
I've been running some version of some slideshow for several years and just tonight HAD to update it. I was thinking it was going to take hours since I'm not very code savvy but it took less than 30 mins.

Very clean with very clear instructions!

Thank you very much!!! (I guess now I better update the contents )
__________________
Jamie
JBHotShots.com
Facebook
All Canon 50D w/Grip, XT w/Grip, 24-70/2.8L, 70-200/2.8L, 85/1.8, 50/1.8 580EXII 430EX
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Who are the SmugMug People? Andy SmugMug Support 66 May-06-2013 09:14 PM
Problem with JFriend HTML5 slideshow Obias7 Legacy SmugMug Customization 1 Sep-01-2012 02:54 PM
JFriend Slideshow PhotoMatt Legacy SmugMug Customization 6 Apr-12-2012 02:13 PM
JFRIEND HTML5 slideshow and redirection of domain lise Legacy SmugMug Customization 2 Jun-13-2011 12:29 PM
Clean up bio before installing JFriend HTML5 slideshow DougG Legacy SmugMug Customization 6 Jun-03-2011 12:00 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