jQuery 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
JavaScript
$(function () {
$("#galleryContainer").dxGallery({
dataSource: [{
imageSrc: "https://js.devexpress.com/Content/images/doc/23_2/PhoneJS/person1.png",
disabled: true
}, {
imageSrc: "https://js.devexpress.com/Content/images/doc/23_2/PhoneJS/person2.png",
imageAlt: "Peter"
}],
height: 300
});
});Angular
HTML
TypeScript
<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/23_2/PhoneJS/person1.png",
disabled: true
}, {
imageSrc: "https://js.devexpress.com/Content/images/doc/23_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/23_2/PhoneJS/person1.png',
disabled: true
}, {
imageSrc: 'https://js.devexpress.com/Content/images/doc/23_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/23_2/PhoneJS/person1.png',
disabled: true
}, {
imageSrc: 'https://js.devexpress.com/Content/images/doc/23_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
JavaScript
$(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
HTML
TypeScript
<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/23_2/PhoneJS/person1.png", name: "Maria" },
{ path: "https://js.devexpress.com/Content/images/doc/23_2/PhoneJS/person2.png", name: "John" },
{ path: "https://js.devexpress.com/Content/images/doc/23_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/23_2/PhoneJS/person1.png", name: "Maria" },
{ path: "https://js.devexpress.com/Content/images/doc/23_2/PhoneJS/person2.png", name: "John" },
{ path: "https://js.devexpress.com/Content/images/doc/23_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/23_2/PhoneJS/person1.png", name: "Maria" },
{ path: "https://js.devexpress.com/Content/images/doc/23_2/PhoneJS/person2.png", name: "John" },
{ path: "https://js.devexpress.com/Content/images/doc/23_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.
HTML
JavaScript
<script id="individualTemplate" type="text/html">
<!-- ... -->
</script>
const galleryData = [{
imageSrc: "https://js.devexpress.com/Content/images/doc/23_2/PhoneJS/person1.png",
imageAlt: "Maria",
template: $("#individualTemplate"),
},
// ...
];Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
Feedback