Class wink.ui.xyz.Wall

Creates a 3D wall (3 rows of images) Displays a 3D wall on the screen. The wall is composed of 3 rows of images. The wall is being moved with its right and left directional arrows
When you instantiate the wall, you must specify the images you want to see in it. Each row must be described and must contain the smae number of images. You can also specify the images height, width and rightMargin. Use the 'getDomNodes' method to add the wall, and the left and right directional arrows to the page. The should be added directly to the body of the page.

Defined in: wall.js

Class Summary
Constructor Attributes	Constructor Name and Description
	wink.ui.xyz.Wall(properties)

Compatibility
Compatibility list	Supported platforms / browsers
	iOS2 (slow), iOS3, iOS4, iOS5, iOS6, Android 4.0, BlackBerry 7, Windows Phone 8

Field Summary
Field Attributes	Field Name and Description
	speed The scrolling speed of the 3D wall
	thumbHeight The height in pixels of the images
	thumbMargins The right margin in pixels of each thumb
	thumbWidth The width in pixels of the images
	uId Unique identifier
	wallDatas The bricks of the wall

Method Summary

Method Attributes	Method Name and Description
	getDomNodes()

Event Summary
Event Attributes	Event Name and Description
	/wall/events/click The event is fired when the user clicks on one of the images of the wall

Class Detail

wink.ui.xyz.Wall(properties)

var wallProperties =
{
  thumbMargins: 20,
  wallDatas: 
  {
     row1: [
     	{ img: "../img/1.gif" },
     	{ img: "../img/2.gif" },
     	{ img: "../img/3.gif" },
     	{ img: "../img/4.gif" },
     	{ img: "../img/5.gif" }
     ],
     row2: [
     	{ img: "../img/1.gif" },
     	{ img: "../img/2.gif" },
     	{ img: "../img/3.gif" },
     	{ img: "../img/4.gif" },
     	{ img: "../img/5.gif" }
     ],
     row3: [
     	{ img: "../img/1.gif" },
     	{ img: "../img/2.gif" },
     	{ img: "../img/3.gif" },
     	{ img: "../img/4.gif" },
     	{ img: "../img/5.gif" }
     ],	
  }
};

wall = new wink.ui.xyz.Wall(wallProperties);

document.body.appendChild(wall.getDomNodes().wall);
document.body.appendChild(wall.getDomNodes().leftPad);
document.body.appendChild(wall.getDomNodes().rightPad);

Parameters:
{object} properties: The properties object
{object} properties.wallDatas: The wall datas
{array} properties.wallDatas.row1: The images to be displayed in the first row of the wall
{array} properties.wallDatas.row2: The images to be displayed in the second row of the wall
{array} properties.wallDatas.row3: The images to be displayed in the third row of the wall
{integer} properties.thumbHeight Optional, Default: 75: The height in pixels of the thumbnails to be displayed
{integer} properties.thumbWidth Optional, Default: 125: The width in pixels of the thumbnails to be displayed
{integer} properties.thumbMargins Optional, Default: 0: The right margin in pixels of each thumb
{float} properties.speed Optional, Default: 1.2: The srcolling speed of the 3D wall

Requires:: wink.fx._xyz
See:: Test page

Field Detail

{float} speed

The scrolling speed of the 3D wall

{integer} thumbHeight

The height in pixels of the images

{integer} thumbMargins

The right margin in pixels of each thumb

{integer} thumbWidth

The width in pixels of the images

{integer} uId

Unique identifier

{object} wallDatas

The bricks of the wall

Method Detail

{object} getDomNodes()

Parameters:

{HTMLElement} object.wall

{HTMLElement} object.leftPad

{HTMLElement} object.rightPad

Returns:

{object} The 'wall' main dom node but also the 'leftPad' and 'rightPad'

Event Detail

/wall/events/click

The event is fired when the user clicks on one of the images of the wall

Parameters:
{object} param: The parameters object
{HTMLElement} param.item: The image on which the user just clicked

documentation

Search

Classes