This sample shows how to use the Gallery widget added at version 2.2. The Gallery widget is a touch-aware thumbnail gallery designed for mobile devices such as the iPhone, iPad, Android, and other supported devices. Users can browse through the gallery of thumbnails using a flick motion.
In this sample, the basemap gallery is displayed using the small thumbnail which is suitable for smaller mobile devices like the iPhone.
var params = {};<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>Mobile Gallery</title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/> <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"/> <style> html, body { height: 100%; margin: 0px; padding: 0px; width: 100%; } .ui-content { padding: 0 !important; } #map { height: 100%; width: 100%; position: absolute; z-index: 0; } </style> <script src="https://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <script src="https://js.arcgis.com/3.46compact/"></script> <script> dojo.require("esri.map"); dojo.require("esri.dijit.Gallery"); dojo.require("esri.dijit.BasemapGallery"); var map, gallery, basemapGallery; function init() { map = new esri.Map('map', { basemap: "topo-vector", center: [-71.121865, 42.370011], zoom: 9 }); basemapGallery = new esri.dijit.BasemapGallery({ showArcGISBasemaps: true, bingMapsKey: '/*Please enter your own Bing Maps key*/', map: map }); dojo.connect(basemapGallery, 'onLoad', function () { items = $.map(basemapGallery.basemaps, function (basemap) { return { thumbnailUrl: basemap.thumbnailUrl, id: basemap.id, title: basemap.title }; }); //display basemaps in the gallery var params = {}; params.items = items; params.thumbnailStyle = 'small'; gallery = new esri.dijit.Gallery(params, 'galleryDiv'); dojo.connect(gallery, 'onSelect', function(item) { console.dir(item); basemapGallery.select(item.id); $(".rp").panel("close"); }); gallery.startup(); }); dojo.connect(basemapGallery, 'onError', function (msg) { console.log(msg); }); dojo.connect(map, 'onLoad', function (evt) { $(document).ready(jQueryReady); }); } function jQueryReady() { } dojo.ready(init); </script> </head> <body> <div data-role="page" id="page"> <div data-theme="a" data-role="header" data-position="fixed"> <h3>Map Gallery</h3> <a href="#right-panel" data-rel="panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-btn-right">Menu</a> </div> <div data-role="content"> <div id="map"></div> </div> <div class="rp" data-role="panel" data-swipe-close="false" id="right-panel" data-theme="c" data-position="right"> <div id="galleryDiv"></div> </div> </div> </body> </html>