Class wink.ui.xy.Slideshow

Implements a slideshow based on the html canvas tag. This component is highly customizable on how to display images: interaction with the user to touch, sliding between images, transition animations, etc. It takes as an argument a list of items related to images; operation consists of distinct parts: loading images, the process of sliding, the process of animation and rendering process. The rendering process is based on a single JavaScript interval, which stops when the slideshow is inactive. The user must be careful about the fact that performance depends on the platform, the size of images and animations selected. Also, some animations have different behaviors between iPhone and Android (fade, light), because they depend on the implementation of the tag Canvas. The Android OS 2.1 introduces bugs in the implementation of the Canvas tag, which does not allow for proper operation of the component.

Defined in: slideshow.js

Class Summary
Constructor Attributes	Constructor Name and Description
	wink.ui.xy.Slideshow(properties)

Compatibility
Compatibility list	Supported platforms / browsers
	iOS2, iOS3, iOS4, iOS5, iOS6, Android 1.5, Android 1.6, Android 2.2, Android 2.3, Android 3.0, Android 3.1, Android 4.0, BlackBerry 6, BlackBerry 7, Bada 1.0, Windows Phone 7.5, Windows Phone 8

Field Summary
Field Attributes	Field Name and Description
	uId Unique identifier

Method Summary

Method Attributes	Method Name and Description
	getCurrentItem() Returns the current displayed item
	getDomNode() Returns the Slideshow dom node
	next() Shows the next item
	previous() Shows the previous item
	updateParameters(properties) Updates the slideshow parameters

Event Summary
Event Attributes	Event Name and Description
	/slideshow/events/animend The animation is ending
	/slideshow/events/animstart The animation is starting
	/slideshow/events/itemChanged The item displayed has changed

Class Detail

wink.ui.xy.Slideshow(properties)

var properties = 
{
	height: 250,
	width: 310,
	items: 
	[
		{ image: 'image1.jpg', title: 'Image 1', info: 'Details of Image 1' },
		{ image: 'image2.jpg', title: 'Image 2', info: 'Details of Image 2' }
	]
	position: 0,
	withAnim: true,
	autoplay: true,
	anims: [ "spin", "spinQuarter" ],
	animRandom: false
}

var slideshow = new wink.ui.xy.Slideshow(properties);

wink.byId('container').appendChild(slideshow.getDomNode());

Parameters:
{object} properties: The properties object
{number} properties.height: The height of the slideshow
{number} properties.width: The with of the slideshow
{array} properties.items: An array of items ( item: { image: the image path, title: the item title, info: the items details })
{integer} properties.position: The index of the displayed item in the item list
{boolean} properties.listeningTouch Optional, Default: true: Indicates whether the component must listen to touch events
{boolean} properties.touchTranslation Optional, Default: false: Indicates whether a translation based on the user's touch must be performed
{boolean} properties.withSliding Optional, Default: false: Indicates whether the sliding mode is active
{boolean} properties.withAnim Optional, Default: false: Indicates whether the animation mode is active
{array} properties.anims Optional: An array of named animation. Animation names : oneSquare, nSquare, fade, horizontalOut, horizontalIn, circleOut, circleIn, circlesOut, circlesIn, rowDown, rowUp, colLeft, colRight, rotate, spin, spinQuarter, light, wrap, scaleIn, scaleOut
{boolean} properties.animRandom Optional, Default: false: Indicates whether a random selection of animation in the list must be done
{boolean} properties.autoplay Optional, Default: false: Indicates whether the autoplay mode is active
{integer} properties.autoplayDuration Optional, Default: 5000: The duration between two displays of items
{integer} properties.slideDuration Optional, Default: 200: The duration of the slide
{integer} properties.animDuration Optional, Default: 800: The duration of the animations
{boolean} properties.displayHeader Optional, Default: true: Indicates whether the header is displayed
{boolean} properties.displayFooter Optional, Default: true: Indicates whether the footer is displayed
{integer} properties.headerHeight Optional, Default: 26: height of the header
{integer} properties.footerHeight Optional, Default: 26: height of the footer
{integer} properties.scopeSize Optional, Default: 4: number of loaded images around the current image

Requires:: wink.ux.MovementTracker
See:: Test page

Field Detail

{integer} uId

Unique identifier

Method Detail

{object} getCurrentItem()

Returns the current displayed item

Returns:

{object} The current item
{HTMLElement} getDomNode()

Returns the Slideshow dom node

Returns:

{HTMLElement} The main dom node
next()

Shows the next item
previous()

Shows the previous item
updateParameters(properties)

Updates the slideshow parameters

Parameters:

{object} properties

The new properties

Event Detail

/slideshow/events/animend

The animation is ending

Parameters:
{object} param: The parameters object
{object} param.currentItem: The item currently displayed
{object} param.previousItem: The next item
{object} param.animation: The current animation

/slideshow/events/animstart

The animation is starting

Parameters:
{object} param: The parameters object
{object} param.currentItem: The item currently displayed
{object} param.nextItem: The next item
{object} param.animation: The current animation

/slideshow/events/itemChanged

The item displayed has changed

Parameters:
{object} param: The parameters object
{object} param.currentItem: The item currently displayed

documentation

Search

Classes