FastShow: A JavaScript/CSS3 Slideshow
We are excited to bring you FastShow, a mobile friendly JavaScript slideshow that uses CSS3 transitions for smooth crossfades and pulls your images automagically from a number of photo hosting services using an RSS 2.0 feed link. Whew! That’s not even the half of it. FastShow is highly customizable with over 100 properties that can be tweaked to create numerous variations. Check out some of the different ways we can configure FastShow to work on your website…
Customization
There are a number of ways FastShow can be customized or integrated into SmugMug. Here are some of the major customizations that can be done.
- Standard
- Standard w/Nav
- Standard w/Thumbnails
- Standard w/Thumbnails and Overlay Nav
- Standard w/Left Thumbnails
- Fullscreen
- Fullscreen w/Thumbnails
- Fullscreen w/Thumbnails and Overlay Nav
Pretty cool huh? 
How does it load my photos?
The slideshow loads your photos using a RSS 2.0 feed link available from a number of photo hosting services. While it works with Flickr, Picasa and Photobucket, it has been thoroughly tested and optimized for SmugMug. If you don’t want to host your photos at any of those places, it can also load images from a folder on your web server.
Don’t worry about touching any code. When we setup your SmugMug website, we create a gallery for each of the slideshows and link them up. All you need to do is update your galleries like you normally would and the slideshow gets updated too.
CSS3 = Smoooooth Transitions
The slideshow will use CSS3 transitions when available instead of JavaScript to fade your images in and out. JavaScript just isn’t up to the task of replacing Flash for this type of thing, but CSS3 is. If you haven’t already, open up Crome or Safari and have a look at the examples above. They should be noticeably smoother than FireFox 3.6 (and below) or Internet Explorer. As each browser adds support for CSS3 transitions we will add that browser to FastShow’s CSS3 logic.
Note: CSS3 transitions are buggy on iPhone/iPad in portrait mode and we haven’t found a fix yet. When in this mode on those devices, FastShow will use JavaScript transitions instead.
License
You are free to use FastShow on your website or websites you create provided the following conditions are met. You shall not distribute, sell, rent, lease, make derivative works, license or sub-license FastShow or any of its individual files. For a complete and up to date license please check this link… FastShow License.
This is only the beginning…
FastShow is based on a little JavaScript API we’re constantly developing dubbed fastline.js. The API has lots of little goodies that make building slideshows a snap. We plan to leverage this code to build even cooler slideshow styles in 2011. Have something you would like to see? Send us a message and we will consider your feedback.
4 Comments
Comments are closed.
The fullscreen w/Thumbnails and overlay nav is very interesting. The fullscreen is already being used with GREAT effects (and only 1 day at that).
Really like the full screen slideshow with thumbnails that you’ve created! Great job & thnx a lot for sharing the code with all. Would love to implement this for my personal website but dont know exactly how to go about doing it outside SmugMug. Any help with outlining the steps to implement it outside SmugMug would be grately appreciated. Thnx a million, in advance!
So if I were to purchase a template, this would be an option in the SM owners dashboard? To switch from slideshow I see in the Fastline template, to this one?
Also,do I not see the fast/slow speeds and other SM native funtion?
The slideshows in the templates cannot be changed via the admin once they are installed. But, we can work with you to do something custom if you would like. Just shoot us an email!
Comments are closed.