SlideShow - gc-tapestry-components - Google Code - A component for creating autonomous slide shows based on DOM element structure.

Updated Dec 22, 2007 by burningodzilla
Labels:	Component

SlideShow

A component for creating autonomous slide shows based on DOM element structure.

Component Parameters

Name	Type	Flags	Default	Default Prefix	Description
loop	boolean		false	prop	Determines if the slide show will start over after displaying the final slide.
interval	int		2	prop	Sets the amount of time (in seconds) each slide will be displayed.
transition	String		SlideShow.Tx.Crossfade	literal	The slide transition object.

Template Code: Basic Usage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
    <head>
        <title>gc-tapestry5-components</title>
    </head>
    <body>
        <div t:type="gc/slideshow" interval="3">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
</html>

Setting the Slide Transition

TODO: Elaborate.

SlideShow.Tx.Crossfade	A scriptaculous-based transition using Effect.Fade and Effect.Appear to achieve a smooth transition from slide to slide.
SlideShow.Tx.Grow	Another scriptaculous transition using Effect.Grow to implement an interesting effect.
SlideShow.Tx.Abrupt	A bland transition that simply changes the slide with no flair.

Styling the UI

The slide show's UI, with the exception of the animation effects achieved by javascript, are controlled by CSS. The structure of the component is extremely simple, assuming only one CSS class. The component assumes that every direct child of the containing element constitutes a slide, leaving the possibilites wide open for its usage. This also makes it easy to style the component. Following are the default style rules included by the component; override as desired:

This class is defined as follows:

.gc-slideshow {
	cursor: pointer;
	position: relative;
	width: 300px;
	height: 300px;
	border: 5px solid #eee;
	overflow: hidden;
}

.gc-slideshow .gc-slide {
	position: absolute;
	top: 0px;
	left: 0px;
}

Note: The direct child operator is not supported by IE versions older than 7, so we can't use a more intelligent selector like .gc-slideshow > .gc-slide {...} . Using a class is also not desireable (by itself) as it requires the user to explicitly set this class on each child element. To compensate, the component's JS automatically attaches the .gc-slide class to each direct descendant of component's element (using addClassName). One may shudder at this idea at first, but consider that this component is useless and totally broken without JS anyway.