5.5. Creating a gallery

You can present media assets in a organized way, using the Gallery widget to display groups of thumbnails, and the Slideshow widget to display the full-sized images. A slideshow may be used alone or may be associated with a gallery. The content for both widgets is separately defined.

The Gallery widget displays thumbnails of items from a specified set. Its appearance, including the number of items being displayed on a single page, can be controlled using XDIME 2 elements.

The Slideshow widget presents one item at a time, and you can specify transition effects to be used when the user switches between items. The Slideshow widget may initially be hidden, and displayed on the user's request.

Creating a gallery

The gallery:items element defines a set of items which will be displayed by the Gallery or Slideshow widgets. The load action uploads specified content from an external source using AJAX.
```
<gallery:items>
  <widget:load src="service/itemgallery" when="defer"/>
</gallery:items>
```

Widget response structure

The gallery:item element defines a single item. Each gallery:item element consists of two parts. The widget:summary element specifies a thumbnail image to be displayed by the Gallery widget. The widget:details element defines a full size version of the thumbnail that will be displayed as a slideshow.

The set of gallery items may be defined directly on the XDIME page, or can be downloaded from an external source via AJAX request. In the latter case, the service should provide the response in the following form.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response"
  xmlns:gallery="http://www.volantis.com/xmlns/2006/10/gallery-widget">
  <response:head>
    <response:link rel="mcs:theme" href="/main.mthm"/>
  </response:head>
  <response:body>
    <gallery:items count="2">
      <gallery:item>
        <widget:summary style="mcs-effect-style:fade">
          <object src="/img1_small.mimg"/>
        </widget:summary>
        <widget:detail style="mcs-effect-style:slide-left">
          <object src="/img1.mimg"/>
        </widget:detail>
      </gallery:item>
      <gallery:item>
        <widget:summary style="mcs-effect-style:fade">
          <object src="/img2_small.mimg"/>
        </widget:summary>
        <widget:detail style="mcs-effect-style:slide-left">
          <object src="/img2.mimg"/>
        </widget:detail>
      </gallery:item>
    </gallery:items>
  </response:body>
</response:response>

The count attribute specifies the total number of items in the gallery

Gallery

The gallery:gallery element defines a Gallery widget. It displays a set of items specified by the gallery:items element. The slideshow attribute specifies id of the Slideshow widget that should be used to display details of the item. The Slideshow widget may be shown on demand. The slideshow-popup attribute specifies id of the Popup widget, with embedded Slideshow widget, which will be shown when the user selects an item.

<gallery:gallery class="widget" slideshow="slideshow"
  slideshow-popup="gallery-popup">
  <div>
    <table>
      <tr>
        <td>
          <widget:previous class="button">&lt;&lt;</widget:previous>
        </td>
        <td>
          <gallery:item-display class="item-display"/>
        </td>
        <td>
          <gallery:item-display class="item-display"/>
        </td>
        <td>
          <gallery:item-display class="item-display"/>
        </td>
        <td>
          <widget:next class="button">&gt;&gt;</widget:next>
        </td>
      </tr>
    </table>
  </div>
  <div class="gallery-info">Displaying items from
    <gallery:start-item-number/> to <gallery:end-item-number/> of
    <gallery:items-count/>
  </div>
</gallery:gallery>

Each gallery:item-display element displays one item
The gallery:start-item-number and gallery:end-item-number elements return the number of the first and last item being displayed in the gallery
gallery:items-count returns the total number of items specified by the gallery:items element
The widget:previous and widget:next elements provide the navigation buttons, which allow the user to go to the previous or next group of items from the given set

Slideshow

The gallery:slideshow element defines a Slideshow widget. The Slideshow widget may be embedded within the Popup widget. In that case, it will be shown when the Gallery widget sends an item to display.

<widget:popup id="gallery-popup" class="popup">
  <gallery:slideshow id="slideshow" class="widget">
    <gallery:item-display class="detail-item-display"/>
    <div>
      <table>
        <tr>
          <td>
            <widget:previous class="button">&lt;&lt;</widget:previous>
          </td>
          <td>
            <widget:pause class="button">Pause</widget:pause>
          </td>
          <td>
            <widget:play class="button">Play</widget:play>
          </td>
          <td>
            <widget:next class="button">&gt;&gt;</widget:next>
          </td>
          <td>
            <widget:dismiss class="button">Close</widget:dismiss>
          </td>
        </tr>
      </table>
    </div>
    <div class="slideshow-info">Displaying item <gallery:item-number/> of
      <gallery:items-count/>
    </div>
  </gallery:slideshow>
</widget:popup>

The gallery:item-display defines a placeholder for the details of the item
The widget:pause, widget:play, widget:previous and widget:next elements provide a control over the slideshow
The widget:dismiss element defines a button that allows users to close the popup containing a slideshow
The gallery:item-number element returns the number of the item being displayed by Slideshow widget
The gallery:items-count element returns the total number of items defined in the gallery:items element

Complete XDIME 2 code

Create a ajax-gallery.xdime file

Modify the ajax-gallery.xdime file by including the following code

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:template="http://www.volantis.com/xmlns/marlin-template"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:gallery="http://www.volantis.com/xmlns/2006/10/gallery-widget"
  xmlns:event="http://www.w3.org/2001/xml-events">
  <head>
    <title>Gallery Widget with AJAX</title>
    <link rel="mcs:theme" href="/themes/main.mthm"/>
    <link rel="mcs:layout" href="/layouts/main.mlyt"/>
    <style type="text/css">
      .item-display {
        width:50px;
        height:50px;
        border:1px solid #c5c5c5;
        margin:5px 5px 5px 5px;	
      }
      .detail-item-display {
        width:170px;
        height:240px;
        border:1px solid #c5c5c5;
      }
      .gallery-info, .slideshow-info {
        border: 1px solid #c5c5c5;
        text-align: center;
        color: black;
      }
      .popup {
        position:static;
        height:100%;
      }
    </style>
  </head>
  <body>
    <template:apply href="templates/demo-main.xdtpl">
      <template:binding name="title" value="Gallery w/AJAX"/>
      <template:binding name="content">
        <template:complexValue>
          <gallery:items>
            <widget:load src="service/itemgallery" when="defer"/>
          </gallery:items>
          <table>
            <tr>
              <td>
                <gallery:gallery class="widget" slideshow="slideshow"
                  slideshow-popup="gallery-popup">
                  <div style="width:100%;overflow: auto">
                    <table>
                      <tr>
                        <td>
                          <widget:previous class="button"
                            >&lt;&lt;</widget:previous>
                        </td>
                        <td>
                          <gallery:item-display class="item-display"/>
                        </td>
                        <td>
                          <gallery:item-display class="item-display"/>
                        </td>
                        <td>
                          <gallery:item-display class="item-display"/>
                        </td>
                        <td>
                          <widget:next class="button">&gt;&gt;</widget:next>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div class="gallery-info">Displaying items from
                    <gallery:start-item-number/> to <gallery:end-item-number/> of
                    <gallery:items-count/></div>
                </gallery:gallery>
              </td>
            </tr>
            <tr>
              <td style="text-align:center;">
                <widget:popup id="gallery-popup" class="popup">
                  <gallery:slideshow id="slideshow" class="widget">
                    <gallery:item-display class="detail-item-display"
                      style="margin: auto"/>
                    <div style="text-align: center">
                      <table>
                        <tr>
                          <td>
                            <widget:previous class="button"
                              >&lt;&lt;</widget:previous>
                          </td>
                          <td>
                            <widget:pause class="button">Pause</widget:pause>
                          </td>
                          <td>
                            <widget:play class="button">Play</widget:play>
                          </td>
                          <td>
                            <widget:next class="button">&gt;&gt;</widget:next>
                          </td>
                          <td>
                            <widget:dismiss class="button">Close</widget:dismiss>
                          </td>
                        </tr>
                      </table>
                    </div>
                    <div class="slideshow-info">Displaying item <gallery:item-number/>
                      of <gallery:items-count/></div>
                  </gallery:slideshow>
                </widget:popup>
              </td>
            </tr>
          </table>
        </template:complexValue>
      </template:binding>
    </template:apply>
  </body>
</html>

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.
table	Defines a table.
td	A cell in a table containing data.
tr	Denotes a row within a table.
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.