React Gallery - Customize Item Appearance
Gallery items are not sctrictly images. They can contain text or other elements of your choice. For a minor customization of Gallery items, you can define specific fields in item data objects. For example, the following code generates two items: one is disabled and the other has a specified alt attribute.
jQuery
$(function () { $("#galleryContainer").dxGallery({ dataSource: [{ imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", disabled: true }, { imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", imageAlt: "Peter" }], height: 300 }); });
Angular
<dx-gallery [dataSource]="galleryDataSource" [height]="300"> </dx-gallery>
import { DxGalleryModule } from "devextreme-angular"; // ... export class AppComponent { galleryDataSource = [{ imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", disabled: true }, { imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", imageAlt: "Peter" }]; } @NgModule({ imports: [ // ... DxGalleryModule ], // ... })
Vue
<template> <DxGallery :data-source="dataSource" :height="300" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxGallery } from 'devextreme-vue/gallery'; export default { components: { DxGallery }, data() { return { dataSource: [{ imageSrc: 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png', disabled: true }, { imageSrc: 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png', imageAlt: 'Peter' }] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Gallery } from 'devextreme-react/gallery'; const dataSource = [{ imageSrc: 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png', disabled: true }, { imageSrc: 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png', imageAlt: 'Peter' }]; class App extends React.Component { render() { return ( <Gallery dataSource={dataSource} height={300} /> ); } } export default App;
If you need a more flexible solution, define an itemTemplate.
jQuery
$(function () { $("#galleryContainer").dxGallery({ dataSource: galleryData, height: 300, 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
<dx-gallery [dataSource]="galleryDataSource" [height]="300" itemTemplate="item"> <div *dxTemplate="let data of 'item'"> <p><b>Name</b>: <span>{{data.name}}</span></p> <img src="{{data.path}}" alt="{{data.name}}" /> </div> </dx-gallery>
import { DxGalleryModule } from "devextreme-angular"; // ... export class AppComponent { galleryDataSource = [ { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", name: "Maria" }, { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", name: "John" }, { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", name: "Xavier" } ]; } @NgModule({ imports: [ // ... DxGalleryModule ], // ... })
Vue
<template> <DxGallery :data-source="dataSource" :height="300" item-template="item"> <template #item="{ data }"> <div> <p><b>Name</b>: <span>{{data.name}}</span></p> <img :src="data.path" :alt="data.name" /> </div> </template> </DxGallery> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxGallery } from 'devextreme-vue/gallery'; export default { components: { DxGallery }, data() { return { dataSource: [ { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", name: "Maria" }, { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", name: "John" }, { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", name: "Xavier" } ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", name: "Maria" }, { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", name: "John" }, { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", name: "Xavier" } ]; const renderGalleryItem = (itemData) => { return ( <div> <p><b>Name</b>: <span>{itemData.name}</span></p> <img src={itemData.path} alt={itemData.name} /> </div> ); } class App extends React.Component { render() { return ( <Gallery dataSource={dataSource} height={300} itemRender={renderGalleryItem} /> ); } } export default App;
jQuery
You can also customize an individual Gallery item. For this purpose, declare a template for this item as a script and pass its id
to the template field of the item's data object.
<script id="individualTemplate" type="text/html"> <!-- ... --> </script>
const galleryData = [{ imageSrc: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", imageAlt: "Maria", template: $("#individualTemplate"), }, // ... ];
Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.