5.6. More about galleries

Retrieving content from external sources

The summary and detail elements can update their content using AJAX. The action defining element, i.e. widget:load, widget:refresh or widget:fetch, must be placed inside the widget:block element. The ajax-gallery-3x3.xdime example illustrates the use of the load action.

The gallery:items element contains a list of items to be displayed in the gallery. Each gallery:item defines a single item. The widget:summary element specifies the visible title, label and thumbnail of the content that is initially hidden. Clicking on the element content makes the widget:detail visible. The widget:summary and widget:detail elements retrieve the information from an external source using the load action.

<gallery:items>
  <gallery:item>
    <widget:summary>
      <widget:block>
        <widget:load src="gallery_responses/gallery_summary_1.xdime" when="onload"/>
        <widget:block-content>
          <object src="images/gallery/loading.mimg"/>
        </widget:block-content>
      </widget:block> 
    </widget:summary>
    <widget:detail>
      <widget:block>
        <widget:load src="gallery_responses/gallery_detail_1.xdime" when="onload"/>
      </widget:block> 
    </widget:detail>
  </gallery:item>
  ...
<gallery:items>

The content of the widget:block-content element is displayed while uploading the main content defined by the widget:load element. It can be an icon indicating that the information is being processed, for example.

The content of the AJAX response must be enclosed by the widget:block-content element

<response:body>
  <widget:block-content>
    <div style="margin: auto; text-align: center"> 
      <object src="../images/gallery/thumbs/img0_small.mimg"/>
      <div>Hill</div>
    </div>
  </widget:block-content>
</response:body>

About layouts

Layout polices can be used to control the physical position of items displayed by a Gallery widget. However, the policies cannot be specified directly by the gallery elements and therefore the div element, a child of the selected gallery element, must point to the corresponding layout policy. The following rules apply:

gallery:gallery - the policy specifies the layout of the gallery:item-display elements
widget:summary - the policy specifies the layout of the content of a single thumbnail
widget:detail - the policy defines the layout of the content of a single item

The ajax-gallery-3x3.xdime example illustrates the use of layout policies. The style attribute of a div element points to the selected layout policy.

<gallery:gallery slideshow="slideshow" slideshow-popup="gallery-popup"  class="gallery_body">
  <div style="mcs-layout: '/layouts/gallery.mlyt'">
    <div style="mcs-container: 'gallery_header'"></div>
    <div style="mcs-container: 'gallery_left'; text-align: center"> 
      <widget:previous class="button-prev">&lt;&lt;</widget:previous>
    </div>
    <div style="mcs-container: 'gallery_content'">
      <div>
        <div style="mcs-layout: '/layouts/gallery-grid.mlyt'">
          <gallery:item-display style="mcs-container: '_1_1'"/>
          <gallery:item-display style="mcs-container: '_1_2'"/>
          <gallery:item-display style="mcs-container: '_1_3'"/>
          <gallery:item-display style="mcs-container: '_2_1'"/>
          <gallery:item-display style="mcs-container: '_2_2'"/>
          <gallery:item-display style="mcs-container: '_2_3'"/>
          <gallery:item-display style="mcs-container: '_3_1'"/>
          <gallery:item-display style="mcs-container: '_3_2'"/>
          <gallery:item-display style="mcs-container: '_3_3'"/>
        </div>
      </div> 
    </div>
    <div style="mcs-container: 'gallery_right'; text-align: center"> 
      <widget:next class="button-next">&gt;&gt;</widget:next>
    </div>
    <div style="mcs-container: 'gallery_footer'; text-align: center">
      <span>Displaying page <gallery:page-number/> of <gallery:pages-count/></span>
    </div>
  </div>
</gallery:gallery>

Embedding slideshows in a gallery

It is possible to embed a Slideshow widget in a widget:summary element. In that case a slideshow of items will be displayed as a gallery summary. The ajax-gallery4-biscuit.xdime file provides a fully functional example.

The gallery displays a set of elements defined by the id attribute of the gallery:items element.

<gallery:gallery items="items_main" id="main_gallery">
  <div style="mcs-layout: '/layouts/gallery.mlyt'">
    <div style="mcs-container: 'gallery_header'"></div>
    <div style="mcs-container: 'gallery_left'; text-align: center"> 
      <widget:previous class="button-prev">&lt;&lt;</widget:previous>
    </div>
    <div style="mcs-container: 'gallery_content'">
      <div>
        <div style="mcs-layout: '/layouts/gallery-biscuit.mlyt'">
          <gallery:item-display style="mcs-container: 'row_1'"/>
          <gallery:item-display style="mcs-container: 'row_2'"/>
          <gallery:item-display style="mcs-container: 'row_3'"/>
          <gallery:item-display style="mcs-container: 'row_4'"/>
        </div>
      </div> 
    </div>
    <div style="mcs-container: 'gallery_right'; text-align: center"> 
      <widget:next class="button-next">&gt;&gt;</widget:next>
    </div>
    <div style="mcs-container: 'gallery_footer'; text-align: center">
      <span>Displaying page <gallery:page-number/> of <gallery:pages-count/></span>
    </div>
  </div>
</gallery:gallery>

All these items contain slideshow widgets inside their summaries.

<gallery:items id="items_main">
  <gallery:item>
    <widget:summary>
      <gallery:slideshow items="set_1" style="mcs-auto-play: yes;">
        <gallery:item-display/>
      </gallery:slideshow>
    </widget:summary>
    <widget:detail/>
  </gallery:item>
  <gallery:item>
    <widget:summary>
      <gallery:slideshow items="set_2" style="mcs-auto-play: yes">
        <gallery:item-display/>
      </gallery:slideshow>
    </widget:summary>
    <widget:detail/>
  </gallery:item>
  ...
</gallery:items>

Each slideshow widget refers to a different set of items. These are specified by the items attributes.

<gallery:items id="set_1">
  <widget:load src="gallery_responses/gallery4_biscuit_01.xdime"  when="onload"/>
</gallery:items>

Each gallery4_biscuit_0*.xdime file contains three items that will be shown by the corresponding slideshow widget. The response structure is described in 5.5. Creating a gallery.
The resulting page displays a gallery presenting four items on a single page. Each item contains a slideshow widget which displays three items in the loop. Each item consists of the image, title and description. Please note one important thing. If the slideshow attribute is specified, then clicking on the item element triggers the slideshow widget. If this attribute is not specified and the summary element contains a link, then clicking on the element allows users to open the link.
```
<div style="float: left;">
  <span style="font-weight: bold"><a href="http://www.volantis.com">Title 1</a></span><mcs:br/>
  <span>Description 1</span>
</div>
```

Three icons indicate the number of the item being displayed.

<div style="float: right; padding-top: 8px; padding-right: 3px;">
  <div style="height: 6px;"><object src="../images/gallery/biscuit-indicator-off.mimg"/></div>
  <div style="height: 6px;"><object src="../images/gallery/biscuit-indicator-on.mimg"/></div>
  <div style="height: 6px;"><object src="../images/gallery/biscuit-indicator-off.mimg"/></div>
</div>

Styling gallery/slideshows controls

The mcs-button-style property allows authors to control the styling of the buttons such as widget:previous, widget:next, widget:play, widget:pause, widget:stop. In native mode, the buttons are rendered by the device using its native styling. In custom mode the page author has full control over the styling via an image policy, for example. See the ajax-gallery-customized.xdime example for details.

<widget:next style="content: mcs-component-url('next.mimg'); mcs-button-style: custom"/>

Checklist

Name	Purpose
div	A section used to add extra structure to documents. Style sheets can be used to control the presentation.
gallery:end-item-number	Returns the number of the last item in the group being displayed by the Gallery widget.
gallery:gallery	Defines a Gallery widget that displays content items identified in the `items` attribute.
gallery:item-display	Displays content of an item specified by the `gallery:item` element. When used within the `gallery:gallery` element, it displays the summary part of the item. If used within the `gallery:slideshow` element, it displays its detail part.
gallery:item-number	Returns the number of the item being displayed by Slideshow widget.
gallery:items	Defines a set of items to be displayed by the Gallery or Slideshow widgets.
gallery:item	Defines a single item in the set of items used by the Gallery or Slideshow widgets. Content specified by the `widget:summary` element will be displayed in the gallery. The Slideshow widget will present content provided by `widget:detail`.
gallery:items-count	Displays the total number of `gallery:item` elements in a gallery or slideshow.
gallery:slideshow	The main element of a Slideshow widget that displays either the content identified in the `items` attribute, or in the same attribute on an associated `gallery:gallery` element.
gallery:start-item-number	Returns the number of the first item in the group being displayed by the Gallery widget.
object	A reference to a media resource. `Object` allows a variety of media resources to be placed on the rendered page. The resource may be specified as an image policy or a device dependent mime type. `Object` also allows the control of media transcoding to ensure the resource will render on the requesting agent. See References to media for details.
response:body	Container for widget response elements.
widget:block	Displays content specified by the `widget:block-content` element or provided by the one of the dynamic actions - fetch, load or refresh. This element supports transition effects.
widget:block-content	A structural element enclosing content, which can be displayed by `widget:block`. It supports transition effects.
widget:detail	Specifies the content of the widget that is initially hidden. It is made visible when the `widget:summary` content is clicked. May contain XDIME 2 block elements in addition to nested folding items, and the `gallery:slideshow`, `widget:block`, `widget:load` elements.
widget:dismiss	Provides a method for dismissing a widget.
widget:load	Controls the loading of a widget's contents in relation to the containing page.
widget:next	Defines a button that links to the next step. In a gallery, it displays the next page. When used in a slideshow, it displays the next item.
widget:pause	Defines the pause button. When used within a Slideshow widget, it pauses the slideshow presentation.
widget:play	Defines a play button. When used in a Slideshow widget, it starts or resumes the slideshow presentations.
widget:popup	The main element for a Popup widget.
widget:previous	Defines a button that links to the previous step. In a gallery, it displays the previous page. When used within a slideshow, it displays the previous item.
widget:summary	Defines the visible title, label or thumbnail for content that is initially hidden. Clicking on the element content makes the `widget:detail` visible.
Core attributes	Attributes that are common to XDIME 2 elements.