Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: Gallery

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

NameSummary
new Gallery(params, srcNodeRef)Creates a new mobile Gallery.

CSS

esri/dijit/Gallery | Download source

NameDescription
esriMobileGalleryDefine the gallery width and height.
esriMobileGallery .thumbnailDefine the thumbnail style.
esriMobileGallery .thumbnail.smallDefine the thumbnail style used when the thumbnailStyle is set to small.
esriMobileGallery .thumbnailContainer.smallDefine the thumbnail container style used when the thumbnailStyle is set to small.
esriMobileGallery.galleryLandscapeDefine the width and height of the gallery in landscape mode.
esriMobileGallery.thumbnail.selectedDefine the thumbnail style for the selected item.
esriMobileGallery.thumbnail.small.selectedDefine the thumbnail style for the selected items when the thumbnailStyle is set to small.

.esriMobileGallery .thumbnail.small.selected {

  border: 2px solid #FF358B;

}

esriMobileGallery.thumbnailContainerDefine the thumbnail container style.
esriMobileGallery.titleDefine the style for the gallery titles when the thumbnailStyle is set to default.
esriMobileGallery.title.smallDefine the style for the gallery titles when the thumbnailStyle is set to small.

Methods

NameReturn typeSummary
destroy()NoneRemoves any object references and associated objects created by the gallery.
getFocusedItem()ObjectGets the item with the current focus.
getSelectedItem()ObjectGet the currently selected item.
next()NoneMove the gallery to the next page of items.
previous()NoneMove the gallery to the previous page of items.
select(item)NoneSelect an item in the gallery.
setFocus(item)NoneSet the focus to the specified item.
startup()NoneFinalize 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

NameEvent ObjectSummary
focus
{
  item: <Object>
}
Fires when the items setFocus method is called.
select
{
  item: <Object>
}
Fires when an item is selected.
Constructor Details

new Gallery(params, srcNodeRef)

Creates a new mobile Gallery.
Parameters:
<Object> params Required See options list.
<Node | String> srcNodeRef Required HTML element where the gallery should be rendered.
params properties:
<Object[]> items 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" 
  }    
];
<Boolean> showTitle Optional Display the title for each item in the gallery. The default value is true.
params.showTitle = false;
<String> thumbnailStyle 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

destroy()

Removes any object references and associated objects created by the gallery. The DOM node used by the gallery is also removed.

getFocusedItem()

Gets the item with the current focus.
Return type: Object
Sample:
var focusItem = gallery.getFocusedItem();

getSelectedItem()

Get the currently selected item.
Return type: Object
Sample:
var selectedItem = gallery.getSelectedItem();

next()

Move the gallery to the next page of items.
Sample:
gallery.next();

previous()

Move the gallery to the previous page of items.
Sample:
gallery.previous();

select(item)

Select an item in the gallery.
Parameters:
<Object> item Required The item to select.
Sample:
gallery.select(params.items[0]);
See also: on("select")

setFocus(item)

Set the focus to the specified item.
Parameters:
<Object> item Required The item which will have focus.
Sample:
gallery.setFocus(params.items[3]);
See also: on("focus")

startup()

Finalize the creation of the gallery. Call startup after creating the gallery widget.
Event Details
[ On Style Events | Connect Style Event ]

focus

Fires when the items setFocus method is called. (Added at v3.6)
Event Object Properties:
<Object> item The item that currently has focus.
Sample:
require([
 ... 
], function( ... ) {
  gallery.on("focus", function(evt) {
    console.log('onFocus: ' + evt.item.id);
  });
  ...
});
See also: setFocus()

select

Fires when an item is selected. (Added at v3.6)
Event Object Properties:
<Object> item The currently selected item.
Sample:
require([
 ... 
], function( ... ) {
   gallery.on("select",function(evt){
     console.log(item.title);
   });
  ...
});
See also: select()
Show Modal