JavaScript/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.
- $(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
- });
- });
If you need a more flexible solution, define an itemTemplate.
- $(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 + "\"/>");
- }
- });
- });
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.