React Gallery - Transform and Combine Images
By default, the Gallery UI component displays one image at a time. To fit more images into a single Gallery view, specify the initialItemWidth property. In this case, the UI component shows as many images scaled down to the initialItemWidth as it can display without cropping them.
jQuery
$(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", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png" ], height: 300, width: 600, initialItemWidth: 250 }); });
Angular
<dx-gallery [dataSource]="galleryDataSource" [height]="300" [width]="600" [initialItemWidth]="250"> </dx-gallery>
import { DxGalleryModule } from "devextreme-angular"; // ... export class AppComponent { galleryDataSource = [ "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", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png" ]; } @NgModule({ imports: [ // ... DxGalleryModule ], // ... })
Vue
<template> <DxGallery :data-source="dataSource" :height="300" :width="600" :initial-item-width="250" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxGallery } from 'devextreme-vue/gallery'; export default { components: { DxGallery }, data() { return { 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', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png' ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Gallery } from 'devextreme-react/gallery'; const 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', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png' ]; class App extends React.Component { render() { return ( <Gallery dataSource={dataSource} height={300} width={600} initialItemWidth={250} /> ); } } export default App;
When distributing images along the total width, the Gallery may add margins between them. To eliminate them, assign true to the stretchImages property.
jQuery
$(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", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png" ], height: 200, width: 320, initialItemWidth: 120, stretchImages: true }); });
Angular
<dx-gallery [dataSource]="galleryDataSource" [height]="200" [width]="320" [initialItemWidth]="120" [stretchImages]="true"> </dx-gallery>
import { DxGalleryModule } from "devextreme-angular"; // ... export class AppComponent { galleryDataSource = [ "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", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png" ]; } @NgModule({ imports: [ // ... DxGalleryModule ], // ... })
Vue
<template> <DxGallery :data-source="dataSource" :height="200" :width="320" :initial-item-width="120" :stretch-images="true" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxGallery } from 'devextreme-vue/gallery'; export default { components: { DxGallery }, data() { return { 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', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png' ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Gallery } from 'devextreme-react/gallery'; const 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', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png' ]; class App extends React.Component { render() { return ( <Gallery dataSource={dataSource} height={200} width={320} initialItemWidth={120} stretchImages={true} /> ); } } export default App;
The Gallery UI component allows you to display not only the current image, but also parts of the previous and the next ones. To enable this feature, assign true to the wrapAround property. Note that in this case, the width of images will be less than the specified initialItemWidth.
jQuery
$(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", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png" ], height: 200, width: 320, initialItemWidth: 200, wrapAround: true }); });
Angular
<dx-gallery [dataSource]="galleryDataSource" [height]="200" [width]="320" [initialItemWidth]="200" [wrapAround]="true"> </dx-gallery>
import { DxGalleryModule } from "devextreme-angular"; // ... export class AppComponent { galleryDataSource = [ "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", "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person4.png" ]; } @NgModule({ imports: [ // ... DxGalleryModule ], // ... })
Vue
<template> <DxGallery :data-source="dataSource" :height="200" :width="320" :initial-item-width="200" :wrap-around="true" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxGallery } from 'devextreme-vue/gallery'; export default { components: { DxGallery }, data() { return { 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', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png' ] }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { Gallery } from 'devextreme-react/gallery'; const 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', 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png' ]; class App extends React.Component { render() { return ( <Gallery dataSource={dataSource} height={200} width={320} initialItemWidth={200} wrapAround={true} /> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.