JavaScript/jQuery Gallery - 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.
JavaScript
- $(function () {
- $("#galleryContainer").dxGallery({
- dataSource: [
- "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png",
- "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png",
- "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png"
- ],
- height: 300,
- selectedIndex: 2
- });
- });
As an alternative, you can specify the initial image using its data source object. In this case, assign the object to the selectedItem property.
JavaScript
- const galleryData = [{
- imageAlt: "Maria",
- imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png"
- }, {
- imageAlt: "John",
- imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png"
- }, {
- imageAlt: "Xavier",
- imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png"
- }];
- $(function () {
- $("#galleryContainer").dxGallery({
- dataSource: galleryData,
- height: 300,
- selectedItem: galleryData[1]
- });
- });
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.