• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

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.

    • Tags:
    • slideshow
    • widget
    • foxxtrot
    • images
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    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

    © 2006-2013 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info