Introducing gallery-slideshow for YUI3

By on March 4th 2010

Recently, at work, we had a desire to update an instance of a flash-based slideshow widget on our commencement website. This widget did absolutely nothing special, but the real problem we had was that, we didn't actually have a license for Flash, and the way the slideshow had been built, we needed to be able to build the SWF file from scratch in order to update the order. Since our users rarely come to us with anything that isn't some sort of emergency, we had to take the flash files to another department to make our quick change and compile a new SWF.

Of course, I knew there was no reason to continue to use unconfigurable Flash for this, but YUI didn't have a slideshow widget. So, I decided to start writing one. Due to the excellent widget framework, I had a quick-and-dirty example written in a mere couple of hours. Of course, that was not something I was really going to release, though I did push it up to my github.

It was about a week before I was able to return to the project, but I have now submitted a very basic, but functional widget to the Y! CDN.

The javascript to run the above slideshow is simple, for the user:

YUI({
            modules: {
                'gallery-slideshow': {
                    fullpath: 'http://yui.yahooapis.com/gallery-2010.03.02-18/build/gallery-slideshow/gallery-slideshow-min.js',
                    requires: ['widget'],
                    optional: ['anim'],
                    supersedes: []
              }
             }
        }).use('gallery-slideshow', 'anim', function(Y) {
            var ss = new Y.SlideShow({
                boundingBox: '#cat-slideshow',
                height: 500, width: 500,
                animation: new Y.Anim({from:{opacity:1.0}, to:{opacity:0.0}}),
                images: [
                    { src: "/2010/03/04/S3010125.JPG" },
                    { src: "/2010/03/04/S3010142.JPG" },
                    { src: "/2010/03/04/S3010171.JPG" },
                    { src: "/2010/03/04/S3010176.JPG" },
                    { src: "/2010/03/04/S3010197.JPG" },
                    { src: "/2010/03/04/S3010248.JPG" }
                ],
                delay: 4000
            });
            ss.render();
        });

The CSS that it requires is straightforward, and is part of the widget's assets:

The widget will automatically take care of placing the images in the upper-left hand corner of the widget's content box, as well as cycling through all the images using the transition sent in via the animation configuration option.

The core of slideshow is mostly done at this point. I plan to add support for the an image to transition in, instead of only having the top image transition out. Most functionality will likely be added via the plugin framework. And I have several plugins planned.

Titles - Adds the widget header which will be populated with the 'title' value from the images array.
Descriptions - Like Titles, but in the footers. I'm thinking this will take either a string or a function to generate the content of the footer div.
Image Centering - This will center all the images in the content box, allowing the slideshow to consist of images of different sizes.
Image Navigation - Buttons (probably images with click events, but you get the idea) which will allow the user to force transition between images.

The plugin framework is great because it allows you to customize a widget with exactly the kind of features you need. There are a lot of other kinds of plugins that would be appropriate, and I'm certainly open to feature requests, or pull requests would be better!