All docs
V21.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Set the Initial Image

By default, the image that the Gallery UI component displays initially is the first item of the data source. To specify another item to be initially displayed, assign its index in the dataSource to the selectedIndex property.

jQuery
JavaScript
$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: [
            "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png",
            "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png",
            "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png"
        ],
        height: 300,
        selectedIndex: 2
    });
});
Angular
HTML
TypeScript
<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [selectedIndex]="2">
</dx-gallery>
import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [
        "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png",
        "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png",
        "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png"
    ];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
Vue
<template>
    <DxGallery
        :data-source="dataSource"
        :height="300"
        :selected-index="2"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGallery } from 'devextreme-vue/gallery';

export default {
    components: {
        DxGallery
    },
    data() {
        return {
            dataSource: [
                'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png',
                'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png',
                'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png'
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Gallery } from 'devextreme-react/gallery';

const dataSource = [
    'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png',
    'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png',
    'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png'
];

class App extends React.Component {
    render() {
        return (
            <Gallery
                dataSource={dataSource}
                height={300}
                defaultSelectedIndex={2}
            />
        );
    }
}

export default App;

As an alternative, you can specify the initial image using its data source object. In this case, assign the object to the selectedItem property.

jQuery
JavaScript
const galleryData = [{
    imageAlt: "Maria",
    imageSrc: "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png"
}, {
    imageAlt: "John",
    imageSrc: "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png"
}, {
    imageAlt: "Xavier",
    imageSrc: "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png"
}];

$(function () {
    $("#galleryContainer").dxGallery({
        dataSource: galleryData,
        height: 300,
        selectedItem: galleryData[1]
    });
});
Angular
HTML
TypeScript
<dx-gallery
    [dataSource]="galleryDataSource"
    [height]="300"
    [selectedItem]="selectedItem">
</dx-gallery>
import { DxGalleryModule } from "devextreme-angular";
// ...
export class AppComponent {
    galleryDataSource = [{
        imageAlt: "Maria",
        imageSrc: "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png"
    }, {
        imageAlt: "John",
        imageSrc: "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png"
    }, {
        imageAlt: "Xavier",
        imageSrc: "https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png"
    }];
    selectedItem = this.galleryDataSource[1];
}
@NgModule({
    imports: [
        // ...
        DxGalleryModule
    ],
    // ...
})
Vue
<template>
    <DxGallery
        :data-source="galleryData"
        :height="300"
        :selected-item="selectedItem"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGallery } from 'devextreme-vue/gallery';

export default {
    components: {
        DxGallery
    },
    data() {
        return {
            galleryData: [{
                imageAlt: 'Maria',
                imageSrc: 'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png'
            }, {
                imageAlt: 'John',
                imageSrc: 'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png'
            }, {
                imageAlt: 'Xavier',
                imageSrc: 'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png'
            }],
            selectedItem: galleryData[1]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Gallery } from 'devextreme-react/gallery';

const galleryData = [{
    imageAlt: 'Maria',
    imageSrc: 'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person1.png'
}, {
    imageAlt: 'John',
    imageSrc: 'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person2.png'
}, {
    imageAlt: 'Xavier',
    imageSrc: 'https://js.devexpress.com/Content/images/doc/21_2/PhoneJS/person3.png'
}];

const selectedItem = galleryData[1];

class App extends React.Component {
    render() {
        return (
            <Gallery
                dataSource={galleryData}
                height={300}
                defaultSelectedItem={selectedItem}
            />
        );
    }
}

export default App;
See Also