Gallery

The gallery component shows images in a gallery on the screen.

Table of Contents

1. Default Selectors
2. HTML Examples
3. Options
4. Methods

Default Selectors

By default, all <div> elements with the data-role="gallery" attribute are displayed as gallery components.

HTML Examples

To create and configure a gallery component, use the <div> element with the data-role attribute:

<div data-role="content" data-scroll="none">
   <div data-role="gallery" id="gallery" data-vertical-align="middle">
   </div>
</div> <!--Content-->
<div data-role="footer" data-position ="fixed">
   <div data-role="controlgroup" data-type="horizontal">
      <a href="#" data-role="button" id="gallery-add">ADD</a>
      <a href="#" data-role="button" id="gallery-del">DELETE</a>
   </div> <!--Navbar-->
</div>

Options

The following table lists the options for the gallery component.

Methods

Summary

add ( string file ) 

empty (  ) 

hide (  ) 

number length (  ) 

?number refresh ( number? startIndex ) 

remove ( number? index ) 

show (  ) 

?number value ( number index ) 

add

Adds an image to the gallery.

add ( string file) 

The file URL of the image must be passed as a parameter.

The refresh method must be called after adding. Otherwise, the file is only added, but not displayed.

Parameters:

Parameter	Type	Required/optional	Default value	Description
file	string	Required		Image file URL.

Return value:

No return value

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));

galleryWidget.add("./images/01.jpg"); // Image with attribute src="./images/01.jpg" is added
galleryWidget.refresh();

Code example (jQuery API support for backward compatibility):

$("#gallery").gallery("add", "./images/01.jpg");
$("#gallery").gallery("add", "./images/02.jpg");
$("#gallery").gallery("refresh"); // To see changes, "refresh" method must be called

empty

Removes all images from the gallery.

empty ( ) 

Return value:

No return value

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));

galleryWidget.empty(); // All images are deleted

Code example (jQuery API support for backward compatibility):

$("#gallery").gallery("empty");

hide

Hides the gallery.

hide ( ) 

The method makes all images invisible and unbinds all touch events.

Return value:

No return value

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));

galleryWidget.hide(); // Gallery is hidden

Code example (jQuery API support for backward compatibility):

$("#gallery").gallery("hide");

length

Gets the number of images.

number length ( ) 

Return value:

Type	Description
number

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery")),
    imagesItems;

imagesLength = galleryWidget.length(); // Number of images

Code example (jQuery API support for backward compatibility):

imagesLength = $("#gallery").gallery("length");

refresh

Refreshes the gallery.

?number refresh ( number? startIndex) 

The method must be called after adding images to the gallery. It is called automatically after changing any component options and calling the value method with a non-empty parameter.

Parameters:

Parameter	Type	Required/optional	Default value	Description
startIndex	number	Optional		Index of the first image.

Return value:

Type	Description
?number	Index of the first image to be displayed.

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));
galleryWidget.refresh();

// Called automatically during option changing (option method) or value setting (value method)

galleryWidget.option("flicking", true);
galleryWidget.value(0);

Code example (jQuery API support for backward compatibility):

$("#gallery").gallery("refresh");

// Called automatically during option changing (option method) or value setting (value method)

galleryWidget.option("flicking", true);
galleryWidget.value(0);

remove

Deletes a specific image from the gallery.
If no parameter is defined, the current image is deleted.

remove ( number? index) 

Parameters:

Parameter	Type	Required/optional	Default value	Description
index	number	Optional		Index of the image to be deleted.

Return value:

No return value

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));

galleryWidget.remove(0); // First image is removed

Code example (jQuery API support for backward compatibility):

$("#gallery").gallery("remove", 0);

show

Displays the gallery.

show ( ) 

The method is called on pageshow event and during refreshing.

Return value:

No return value

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery"));

galleryWidget.show();

Code example (jQuery API support for backward compatibility):

$("#gallery").gallery("show");

value

Gets or sets the current index of the gallery.

?number value ( number index) 

If the parameter is not defined, the current index is returned. Otherwise, the index of the image is set and the proper image is displayed.

The image index is counted from 0. If a new index is less than 0 or greater than or equal to the length of the images, the index is not changed.

Parameters:

Parameter	Type	Required/optional	Default value	Description
index	number	Required		Index of the image to be displayed

Return value:

Type	Description
?number

Code example (TAU API RECOMMENDED):

var galleryWidget = tau.widget.Gallery(document.getElementById("gallery")),
    value = galleryWidget.value(); // Value contains the index of the current image

galleryWidget.value(0); // First image is displayed

Code example (jQuery API support for backward compatibility):

value = $("#gallery").gallery("value"); // Value contains the index of the current image

$("#gallery").gallery("value",  0); // First image is displayed