The gallery component shows images in a gallery on the screen.
Note |
---|
This component is supported since Tizen 2.0. |
By default, all <div>
elements with the data-role="gallery"
attribute are displayed as gallery components.
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>
The following table lists the options for the gallery component.
Option | Input type | Default value | Description |
---|---|---|---|
data-duration | number | 500 | The duration each gallery image is shown. |
data-flicking | boolean | false | Sets whether flicking is enabled. |
data-index | number | 0 | Index of the gallery image to be shown. |
data-vertical-align | "top" | "middle" | "bottom" | "top" | Object with default options. |
Method | Description |
---|---|
add ( string file ) |
Adds an image to the gallery. |
empty ( ) |
Removes all images from the gallery. |
hide ( ) |
Hides the gallery. |
number length ( ) |
Gets the number of images. |
?number refresh ( number? startIndex ) |
Refreshes the gallery. |
remove ( number? index ) |
Deletes a specific image from the gallery. |
show ( ) |
Displays the gallery. |
?number value ( number index ) |
Gets or sets the current index of the gallery. |
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 valueCode 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 valueCode 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 valueCode 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 valueCode 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 valueCode 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