Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: Gallery
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/Gallery"], function(Gallery) { /* code goes here */ });
Description
(Added at v2.2)
The Gallery widget provides a touch-aware thumbnail gallery for mobile devices such as iOS and Android. The gallery displays a horizontal scrolling view of thumbnail images. The widget provides touch-access so users can flick through the gallery to select or view items.Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new Gallery(params, srcNodeRef) | Creates a new mobile Gallery. |
CSS
esri/dijit/Gallery | Download source
| Name | Description |
|---|---|
| esriMobileGallery | Define the gallery width and height. |
| esriMobileGallery .thumbnail | Define the thumbnail style. |
| esriMobileGallery .thumbnail.small | Define the thumbnail style used when the thumbnailStyle is set to small. |
| esriMobileGallery .thumbnailContainer.small | Define the thumbnail container style used when the thumbnailStyle is set to small. |
| esriMobileGallery.galleryLandscape | Define the width and height of the gallery in landscape mode. |
| esriMobileGallery.thumbnail.selected | Define the thumbnail style for the selected item. |
| esriMobileGallery.thumbnail.small.selected | Define the thumbnail style for the selected items when the thumbnailStyle is set to small.
.esriMobileGallery .thumbnail.small.selected {
border: 2px solid #FF358B;
}
|
| esriMobileGallery.thumbnailContainer | Define the thumbnail container style. |
| esriMobileGallery.title | Define the style for the gallery titles when the thumbnailStyle is set to default. |
| esriMobileGallery.title.small | Define the style for the gallery titles when the thumbnailStyle is set to small. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Removes any object references and associated objects created by the gallery. |
| getFocusedItem() | Object | Gets the item with the current focus. |
| getSelectedItem() | Object | Get the currently selected item. |
| next() | None | Move the gallery to the next page of items. |
| previous() | None | Move the gallery to the previous page of items. |
| select(item) | None | Select an item in the gallery. |
| setFocus(item) | None | Set the focus to the specified item. |
| startup() | None | Finalize the creation of the gallery. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| focus | {
item: < | Fires when the items setFocus method is called. |
| select | {
item: < | Fires when an item is selected. |
Constructor Details
Creates a new mobile Gallery.
Parameters:
< |
Required | See options list. |
< |
Required | HTML element where the gallery should be rendered. |
params properties: < |
Required | An array of items, see example below. Note that only the thumbnailUrl is required however an id is commonly provided in order to identify the selected item.
var itemsArray = [
{
"id": "0a27f5cb1f07478fbdf117b70231c5c2",
"title": "Recent Population Change in USA",
"snippet": "This map indicates the annual compound rate of total population
change in the United States from 2000 to 2010.",
"thumbnailUrl": "http://myServer/thumbnail/population_change.jpg"
},
{
"id": "12dccf99d82749aeb864259ee0854c7b",
"title": "Global Distribution of Seagrasses-Points Dataset (2005)",
"snippet": "World Database on Protected Areas",
"thumbnailUrl": "http://myServer/thumbnail/ago_downloaded.png"
}
];
|
< |
Optional | Display the title for each item in the gallery. The default value is true.params.showTitle = false; |
< |
Optional | Specify the size of the gallery's thumbnail image. Valid values are "small" and "default". |
Sample:
require([
"esri/dijit/Gallery", ...
], function(Gallery, ... ) {
var params = {};
params.items = itemsArray;
params.thumbnailStyle = "small";
gallery = new Gallery(params, "galleryDiv");
...
});
Method Details
Removes any object references and associated objects created by the gallery. The DOM node used by the gallery is also removed.
Gets the item with the current focus.
Return type:
ObjectSample:
var focusItem = gallery.getFocusedItem();
Get the currently selected item.
Return type:
ObjectSample:
var selectedItem = gallery.getSelectedItem();
Select an item in the gallery.
Parameters:
< |
Required | The item to select. |
Sample:
gallery.select(params.items[0]);
See also: on("select")
Set the focus to the specified item.
Parameters:
< |
Required | The item which will have focus. |
Sample:
gallery.setFocus(params.items[3]);
See also: on("focus")
Event Details
[ On Style Events | Connect Style Event ]
Fires when the items setFocus method is called. (Added at v3.6)
Event Object Properties:
< |
The item that currently has focus. |
Sample:
require([
...
], function( ... ) {
gallery.on("focus", function(evt) {
console.log('onFocus: ' + evt.item.id);
});
...
});
See also: setFocus()