dxGallery

The dxGallery widget displays images in a horizontally scrolled view.

View Demo

Default Item Template

The dxGallery widget displays images stored in an array specified using the dataSource configuration option. The default item template implies that a data item is an object containing any of the fields described in the dxGallery API reference.

The imageSrc field specifies the URL of the image displayed by the item.

JavaScript
var galleryData = [
    { imageSrc: "/Content/images/doc/15_1/PhoneJS/person1.png" },
    { imageSrc: "/Content/images/doc/15_1/PhoneJS/person2.png" },
    { imageSrc: "/Content/images/doc/15_1/PhoneJS/person3.png" },
    { imageSrc: "/Content/images/doc/15_1/PhoneJS/person4.png" }
];

If a gallery item has a different structure, or you need to specify a custom gallery item markup, define a custom template for widget items.

JavaScript
var galleryData = [
    { path: "/Content/images/doc/15_1/PhoneJS/person1.png", name: "Maria" },
    { path: "/Content/images/doc/15_1/PhoneJS/person2.png", name: "John" },
    { path: "/Content/images/doc/15_1/PhoneJS/person3.png", name: "Xavier" },
    { path: "/Content/images/doc/15_1/PhoneJS/person4.png", name: "Amanda" }
];
jQuery Approach
JavaScript
$("#galleryContainer").dxGallery({
    dataSource: galleryData,
    itemTemplate: function(e){
        e.itemElement.empty();
        e.itemElement.append("<p><b>Name</b>: " + e.itemData.name + "</p>");
        e.itemElement.append("<img src=\"" + e.itemData.path + "\" alt=\"" + e.itemData.name + "\"/>");
    }
});  
Angular Approach
HTML
<div dx-gallery="{ dataSource: galleryData }">
    <div data-options="dxTemplate: { name: 'item' }">
        <p><b>Name</b>: <span>{{name}}</span></p>
        <img ng-attr-src="{{path}}" ng-attr-alt="{{name}}" />
    </div>
</div>
Knockout Approach
HTML
<div data-bind="dxGallery: { dataSource: galleryData }">
    <div data-options="dxTemplate: { name: 'item' }">
        <p>
            <b>Name</b>: <span data-bind="text: name"></span>
        </p>
        <img data-bind="attr: { src: path, alt: name }" />
    </div>
</div>
See Also

Navigate Through Images

The dxGallery widget displays only a single image at a time. You can use any of the following ways to navigate through the images associated with the widget.

  • Swipe the current image You can swipe the current image to switch to the next or previous item. This feature is enabled by default. You can specify its availability using the swipeEnabled option.

  • Click an indicator bullet
    The indicator is a set of bullets located under the displayed image. Each bullet corresponds to an image. The bullet corresponding to the currently displayed image is highlighted. You can specify indicator availability using the showIndicator option. The indicator is visible by default.

    To enable an end-user to switch images by clicking an indicator bullet, set the indicatorEnabled option to true.

    JavaScript
    var galleryOptions = {
        dataSource: galleryData,
        showIndicator: true,
        indicatorEnabled: true
    };
  • Click a navigation button
    The dxGallery widget can display navigation buttons used to switch to the previous or next image. These buttons are located at the right and left side of the displayed image. You can specify navigation button availability using the showNavButtons option.

    JavaScript
    var galleryOptions = {
        dataSource: galleryData,
        showNavButtons: true
    };

Display Modes

  • Loop
    The dxGallery widget can display specified images in a loop. If the widget loop mode is enabled, it scrolls back to the first item if an end-user navigates forward from the last item, or goes to the last item if an end-user navigates backward from the first item. The loop mode is disabled by default. To enable it, assign true to the loop configuration option.

    JavaScript
    var galleryOptions = {
        dataSource: galleryData,
        loop: true
    };
  • Slideshow
    The widget also supports the slideshow mode. If the this mode is enabled, the images are switched automatically after the specified time span. To enable the slideshow mode, assign a positive numeric value, which specifies the time span in milliseconds, to the slideshowDelay option. If the option is set to zero, the slideshow mode is disabled.

    JavaScript
    var galleryOptions = {
        dataSource: galleryData,
        slideshowDelay: 1500
    };

    If the slideshow mode is enabled, you can specify the time spent on single slide animation using the animationDuration option.

Keyboard Support

An end-user can use the Left/Right arrow key to display previous/next item.