Gallery Configuration

An object defining configuration options for the dxGallery widget.

animationDuration

The time, in milliseconds, spent on slide animation.

Type: Number
Default Value: 400

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: {
  dataSource: galleryData,
  loop: true,
  slideshowDelay: 500,
  animationDuration: galleryAnimationDuration
}"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Animation duration</div>
    <div class="dx-field-value" data-bind="dxNumberBox: { width: 'auto', min:0, max:5000, value: galleryAnimationDuration }"></div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];

galleryAnimationDuration = ko.observable(400);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="galleryContainer" data-bind="dxGallery: { dataSource: galleryData, clickAction: processClick }"></div>
processClick = function () {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
};
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];

dataSource

A data source used to fetch data to be displayed by the dxGallery widget.

Type: Object
Default Value: null

The default template of a data source item object may contain the following fields.

  • html - specifies html code inserted into the item element
  • text - specifies text inserted into the item element

Refer to the Data-Bound Application tutorial for more information.

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { dataSource: galleryData }">
  <div data-options="dxTemplate: { name: 'item' }">
    <h1 data-bind="text: name"></h1>
    <img data-bind="attr: { src: src }" />
  </div>
</div>
galleryData = [
    {
      src: "/Content/images/doc/13_1/PhoneJS/person1.png",
      name: "Person1"
    },
    {
      src: "/Content/images/doc/13_1/PhoneJS/person2.png",
      name: "Person2"
    },
    {
      src: "/Content/images/doc/13_1/PhoneJS/person3.png",
      name: "Person3"
    },
    {
      src: "/Content/images/doc/13_1/PhoneJS/person4.png",
      name: "Person4"
    }
];
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the component at runtime.

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { disabled: galleryDisabled, dataSource: galleryData }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: galleryDisabled }"></div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];

galleryDisabled = ko.observable(false);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

height

Specifies the height of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the height of the widget in pixels;
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit");
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; }).

indicatorEnabled

A Boolean value specifying whether or not to allow users to switch between items by clicking an indicator.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { indicatorEnabled: galleryIndicatorEnabled, dataSource: galleryData }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Indicator enabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: galleryIndicatorEnabled }"></div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];
galleryIndicatorEnabled = ko.observable(true);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

itemClickAction

An action performed when a collection item is clicked.

Type: Action
Default Value: null

An object passed to the action function assigned to this option can have the following fields besides the basic field set.

  • itemData - contains an object representing the clicked item
  • itemElement - contains an html element representing the clicked item

itemRender

A function used to render collection items.

Type: function
Default Value: null

The rendering function should have the following parameters, and return an HTML string, element, or jQuery object representing the rendered item.

  • itemData - an object representing the rendered item
  • itemIndex - an index of the rendered item
  • itemElement - a container element containing the rendered item

The following is an example of a function used to render an item.

itemRenderedAction

An action performed after a collection item is rendered.

Type: Action
Default Value: null

items

An array of items displayed by the widget.

Type: Array

You can use the dataSource option instead. Unlike the items option, the dataSource option can take on the DataSource configuration object as well as a simple array.

itemTemplate

The name of the template used to render widget items, or the function returning the template name.

Type: String|function
Default Value: "item"

loop

A Boolean value specifying whether or not to scroll back to the first item after the last item is swiped.

Type: Boolean
Default Value: false

noDataText

The text displayed by the widget if the item collection is empty.

Type: String
Default Value: "No data to display"

selectedIndex

The index of the currently active gallery item.

Type: Number
Default Value: 0

showIndicator

A Boolean value specifying whether or not to display an indicator that points to the selected gallery item.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { showIndicator: galleryShowIndicator, dataSource: galleryData }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Show indicator</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: galleryShowIndicator }"></div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];

galleryShowIndicator = ko.observable(true);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

showNavButtons

A Boolean value that specifies the availability of navigation buttons.

Type: Boolean
Default Value: false

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { showNavButtons: galleryShowNavButtons, dataSource: galleryData }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Show nav buttons</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: galleryShowNavButtons }"></div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];

galleryShowNavButtons = ko.observable(false);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

slideshowDelay

The time interval in milliseconds, after which the gallery switches to the next item.

Type: Number
Default Value: 0

If the value is set to 0, the slide show is disabled.

swipeEnabled

A Boolean value specifying whether or not to allow users to switch between items by swiping.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div class="gallery" data-bind="dxGallery: { swipeEnabled: gallerySwipeEnabled, dataSource: galleryData }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Swipe enabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: gallerySwipeEnabled }"></div>
  </div>
</div>
galleryData = [
    "/Content/images/doc/13_1/PhoneJS/person1.png",
    "/Content/images/doc/13_1/PhoneJS/person2.png",
    "/Content/images/doc/13_1/PhoneJS/person3.png",
    "/Content/images/doc/13_1/PhoneJS/person4.png"
];
gallerySwipeEnabled = ko.observable(true);
body{
  text-align: center;
}
.gallery{
  margin: 10px;
  height: 370px;
}
.dx-field .dx-field-label{
  width:auto;
}

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the widget width in pixels;
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit");
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; }).