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.

This module has been deprecated and is no longer supported by the module author.

Slideshow (gallery-slideshow) on cdn

Last Updated: 11/19/12

Jeff Craig

YUI Contributor

See 8 more by this user.

Created: 02/8/10
Last CDN Push: 03/23/10
Build Tag: gallery-2010.03.23-17-54
Project: YUI 3
License: YUI BSD
YUI Version: 3.8.0pr1
Free for use.

Note: This is under active development. Check the gallery-slideshow/tests folder for the most current examples on how this module works.

The base implementation of Slideshow is designed to be as simple as possible, supporting displaying a series of images of identical size that cycle through the selection, optionally applying a supplied animation for the transition between images.

Future developments will use the plugin architecture to modify the behaviour to support things like images of different sizes and such.

Supported Attributes (above what Widget supports):

images: An array of objects offering information about the images. See below
anim: The animation to apply, must be an instance of Y.Anim
delay: The time in milliseconds to display an image before beginning to transition to the next
image_height: The height of the image area of the widget. This should be smaller than the overall height, if set.
image_width: The width of the image area of the widget. This should be smaller than the overall width, if set.
title: The title to apply to the slideshow.

The Images structure:

src: The URI to load in the image tag

There are currently two plugins available for Slideshow,
1. gallery-slideshow-image-scaler

This plugin will use the height and width properties for each item in the Images structure (or default values you provide when instantiating the plugin) to scale using CSS each image. Usually this isn't the correct thing to do.

2. gallery-slideshow-image-padder

This plugin will apply padding around each image in order to center it in the content body area of the widget. This allows for slideshows to consist of images of different sizes cleanly, though it does require the background-color property on the .yui-slideshow-body to be set.

Code Sample

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

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.03.23-17-54'
}).use('gallery-slideshow', 'gallery-slideshow-image-scaler' 'gallery-slideshow-image-padder', function(Y) {
  var images = [ { src: 'img1.jpg', height: 75 }, {src: 'img2.jpg', width: 75 }, {src: 'img3.jpg' }),
       slideshow = new Y.Slideshow({srcNode: "#slideshow", 
                                    duration: 5000, 
                                    images: img_array, 
                                    image_height: 200, 
                                    image_width: 200});
  slideshow.plug(Y.SlideShow.ImageScaler, { height: 100, width: 100 });
  slideshow.plug(Y.SlideShow.ImagePadder);
  slideshow.render();
});

Forum Posts

Subject	Author	Date
Slideshow module writeup on Jeff's blog	Eric Miraglia	03/11/10
Progressive Enchancement Update	Jeff Craig	03/15/10
Re: Progressive Enchancement Update	Luke Smith	03/16/10
Re: Progressive Enchancement Update	Jeff Craig	03/16/10
Re: Progressive Enchancement Update	Luke Smith	03/16/10
Re: Progressive Enchancement Update	Jeff Craig	03/16/10
All images in slideshow showing on load	Dave Neill	06/22/10
Re: All images in slideshow showing on load	Jeff Craig	06/22/10
Small error	Marco Asbreuk	02/28/11
z-index	Marco Asbreuk	02/28/11