# Gallery --- This widget helps build galleries to organize images. **All rights of pictures used in following samples belong to [Microsoft Bing](http://www.bing.com).** ## Usage ### Copy and Paste - Copy the codes in examples, and paste it to the `` of the Amaze UI HTML template([Download](/getting-started)); - Replace the contents in examples with your own contents. ### Using Handlebars The Handlebars partial of this widget is `gallery`. See [Accordion](/widgets/accordion) for more details. ### Allmobilize WebIDE - Drag the widget to the edit interface; - Click the `Data binding` button on the right panel, and bind data using following format. ```javascript var data = [ { "img": "", // Thumbnail URL "link": "", // Image URL "title": "", // Title "desc": "" // Additional information. Support DOM object. } ]; return data; ``` ## Specify a Thumbnail Considering the limit of data traffic, this gallery widget allow using thumbnails in list and show the original image when use click on it. ### Using `data-rel` Set the `data-rel` attribute to be the URL of original image. `````html ````` ```html ``` ### Using link Use `data-am-gallery="{pureview:{target: 'a'}}"` for `target`. This way is better considering accessibility. Users can still open the link to see the original image even if they have disabled the Javascript. `````html ````` ```html ``` ## Wechat image viewer Wechat image viewer will be used when opening an image in wechat. It can be disabled using following attributes. ```html