Copied to Clipboard...
JFriend HTML5 Slideshow
Smugmug Customization
Summary
Title:
JFriend HTML5 Slideshow
Current Version:
Unspecified
Last Updated:
Unspecified
Author:
John Friend
Documentation:
Complete Reference, Tutorial, Release Notes
Questions or Problems:
Dgrin Discussion For This Customization
Description
This is a replacement slideshow for the custom Smugmug slideshow used by many on your homepage, category pages or other special pages.  This slideshow is 100% HTML, CSS, Javascript and CSS3 and HTML5 (when present).  There is no Adobe flash at all in this slideshow so it loads faster, doesn't have any issues with flash being installed and runs on platforms that don't have Adobe flash (like phones, iDevices, etc...).  Here are some of the advantages of this slideshow:
  1. Loads 3-10x faster than the Smugmug slideshow. No waiting. Splash screen comes up instantly.
  2. Stretchy option so it can grow/shrink with the size of the page
  3. Snazzy slideshow transitions (fades, wipes, reveals, flips, scaling, etc...)
  4. A slideshow that has full functionality without Adobe flash. No flash version headaches for your viewers. No flash loading time. No flash install issues.
  5. A slideshow that works in browsers that don't have flash.
  6. A slideshow that automatically sizes itself to a mobile screen and works on Android phones, Android tablets, iPhone, iTouch, iPad, etc...
  7. A slideshow that's fully customizable with more than 50 customization options and further customization with CSS.
  8. A slideshow that can automatically stretch/scale itself to display the largest images possible.
  9. 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.
  10. Let me say this again. 100% javascript, CSS and HTML. No Adobe flash.
  11. Color managed slideshow display for accurate color on a color calibrated system in a color-management-capable browser (like Safari or Firefox).
  12. 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.
  13. Tested in Firefox (v2-v4), Safari (v4-v5), IE6-IE8, Opera (v10-v11), Android (2+) phones and tablets, iPad, iTouch, iPhone, Chrome 8.
Here are some existing sites using the slideshow so you can see how it works:
  1. Stretchy slideshow (slideshow scales automatically to the amount of space available in the browser window)
  2. Supersize slideshow (all images scale to fill the slideshow area - also shows image caption display)
  3. Slideshow in a frame
For those of you that may have used the previous stretchy slideshow, this is a complete replacement for that.  That was a wrapper around Smugmug's Flash slideshow to make it stretchy.  This is a completely new slideshow.  If you want the advantages cited above, I would recommend switching to this one.
To install the JFriend HTML5 Slideshow, follow these steps:
  1. Back up your current customizations.
    In the advanced customizations screen, click on the Email It! button at the bottom of that screen. This will email a copy of all your current customizations to you so you have them as a backup if you have any need to revert back.
  2. Copy the main javascript to your bottom javascript.
    Click on the "Bottom Javascript" button to copy the code to your clipboard (you may have to click twice to see the copy confirmation).  Then, paste it into the end of the "Bottom Javascript" section of your Advanced Customization.   If you already have a copy of the slideshow and are upgrading, make sure to remove the old code before copying this code in.  If you have other code in your bottom javascript, I'd suggest putting this at the end for easier housekeeping.
    Copy Bottom Javascript
  3. Copy the top javascript to your top javascript.
    Click on the "Top Javascript" button to copy the code to your clipboard (you may have to click twice to see the copy confirmation).  Then, paste it into the end of the "Top Javascript" section of your Advanced Customization.   If you already have a copy of the slideshow and are upgrading, make sure to remove the old code before copying this code in.  If you have other code in your top javascript, I'd suggest putting this at the end for easier housekeeping.
    Copy Top Javascript
  4. Copy the CSS to your CSS section.
    Click on the "CSS" button to copy the CSS code to your clipboard (you may have to click twice to see the copy confirmation).  Then, paste it into the end of the "CSS" section of your Advanced Customization.   If you already have a copy of the slideshow and are upgrading, make sure to remove the old CSS code before copying this code in.  If you have other code in your CSS section, I'd suggest putting this at the end for easier housekeeping.
    Copy CSS
  5. Add the activation code to place your slideshow.
    Follow the instructions in this tutorial for creating your activation code to configure and insert the slideshow where you'd like it to go.
  6. Add additional slideshow configuration options.
    Additional slideshow configuration are described in the slideshow reference.