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.

JavaScript
  • $(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.

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 + "\"/>");
  • }
  • });
  • });

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/24_2/PhoneJS/person1.png",
  • imageAlt: "Maria",
  • template: $("#individualTemplate"),
  • },
  • // ...
  • ];

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also