dxGallery

The dxGallery widget displays images in a horizontally scrolled view.

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 a string specifying the path to an image.

JavaScript
var galleryData = [
    "/Content/images/doc/14_1/PhoneJS/person1.png",
    "/Content/images/doc/14_1/PhoneJS/person2.png",
    "/Content/images/doc/14_1/PhoneJS/person3.png",
    "/Content/images/doc/14_1/PhoneJS/person4.png"
];

If a gallery item is an object, you should define a custom template for widget items.

JavaScript
var galleryData = [
    { imgPath: "/Content/images/doc/14_1/PhoneJS/person1.png", name: "Maria" },
    { imgPath: "/Content/images/doc/14_1/PhoneJS/person2.png", name: "John" },
    { imgPath: "/Content/images/doc/14_1/PhoneJS/person3.png", name: "Xavier" },
    { imgPath: "/Content/images/doc/14_1/PhoneJS/person4.png", name: "Amanda" }
];
  • jQuery Approach

    JavaScript
    var itemRenderer = new function(itemData, itemIndex, itemElement){
        var result = "<p><b>Name</b>: " + itemData.name + "</p>";
        result += "<img src=\""+ itemData.imgPath + "\"/>";
        return result;
    };
    $("#galleryContainer").dxGallery({
        dataSource: galleryData,
        itemRender: itemRenderer
    });
  • 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: imgPath }" />
        </div>
    </div>
  • 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="{{imgPath}}" />
        </div>
    </div>

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.