Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Slideshow Animated (gallery-slideshow-animated) on cdn

Last Updated: 03/22/10

+ 0 -

James Punteney

YUI Contributor

See 2 more by this user.

Created: 03/22/10
Last CDN Push: 05/21/10
Build Tag: gallery-2010.05.21-18-16
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.0
Free for use.

The Animated Slideshow script easily converts html content into a slideshow. It supports any html element so the slides can be divs, imgs, or any other html element you want. It supports a variety of slide transitions and user actions including:

Fading
Sliding horizontally and vertically
Crossing horizontally and vertically
Panning or sliding between slides
Automatic recognition of play and pause buttons
Automatic recognition of buttons to change to an individual slide
Event notification for custom scripting on a variety of events

The simplest way to use this script is to use the

Y.SlideshowAnimated.auto();

method. It will look for any element in your document with a css class of "slideshow", then within that element it will look for any html elements with the class of "slide" that will become the actual slides. It's probably the easiest to understand by looking at the examples. To change the slide transition to something other than the default fade just add one of these css classes onto the main slideshow element (the element must still have the "slideshow" css class even if has one of the classes below):

"horizontalSlideshow" - This will make the slides move in and out going from right to left.
"horizontalCrossSlideshow" - This will make the incoming slide move in from the right, and the outgoing slide move out to the right crossing each other.
"verticalSlideshow" - This will make the slides move from the top to the bottom when coming in and out.
"verticalCrossSlideshow" - This will make the incoming slide move from the top down, and the outgoing slide move from the bottom up crossing each other.
"panningSlideshow" - Will keep the slides arranged in their normal layout, can be a grid or a straight line. It will then move the underlying layer so that the selected slide is lined up in the viewport at the top right.

You can also pass a config option to the auto method specifying the:

"pause_time" - How long each slide should be displayed before changing.
"duration" - How long the animation should take.
"easing" - Any of the YUI easing methods to apply to the animation.

If you include the code shown below and then have the css class "slideshow" on an element, with an optional additional animation class it will render the element as a slideshow.

For adiditonal methods to run the slideshow and configure it check out the full documentation and examples.

Code Sample

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.05.21-18-16'
}).use('gallery-slideshow-animated', function(Y) {
 
    Y.SlideshowAnimated.auto();
 
});

Forum Posts

Subject	Author	Date
newbie question about pause_time	Catharine Hendricks	04/12/10
Re: newbie question about pause_time	K o v a c s	04/12/10
Update for YUI 3.1?	bowtah	05/20/10
Re: Update for YUI 3.1?	Eric Miraglia	05/20/10
Re: Update for YUI 3.1?	James Punteney	05/21/10
Re: Update for YUI 3.1?	bowtah	05/21/10
Is it possible to load images on demand?	Ventzy Kunev	10/11/10
Issues with loading images and painting performance/glitches	Terri Beausejour	11/27/12
Re: Issues with loading images and painting performance/glit	Terri Beausejour	12/1/12