Gallery

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

Note
This component has been DEPRECATED since Tizen 2.4 and will be deleted in Tizen 3.0.
To support Backward compatibility, please import tau.support-2.3.js.
Since 2.4, to implement Gallery sample, please use Section Changer component.

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.

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.

Methods

Summary

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.
If no parameter is defined, the current image is deleted.

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 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 */