> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/gallery.md). # Gallery ### ***Component is build based on*** [***NgxGallery***](https://github.com/lukasz-galka/ngx-gallery) ## Usage **app.html** ```markup ``` **app.ts** ```typescript myGallery = new GalleryModel({ options: [ { width: '100%', imagePercent: 60, imageArrowsAutoHide: true, thumbnailsPercent: 40, thumbnailsRows: 2, thumbnailMargin: 1, thumbnailsMargin: 1, thumbnailsArrowsAutoHide: true, previewFullscreen: true } ], images: [ { small: 'https://i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_602x339.jpg', big: 'https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_1920x1080.jpg', description: 'Nature waterfall summer lake_trees' }, { small: 'https://i1.wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_602x339.jpg', big: 'https://wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_1920x1080.jpg', description: 'Summer mountains nature lake river grass' }, { small: 'https://i1.wallpaperscraft.com/image/dawn_grass_sky_summer_light_87653_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/dawn_grass_sky_summer_light_87653_602x339.jpg', big: 'https://wallpaperscraft.com/image/dawn_grass_sky_summer_light_87653_1920x1080.jpg', description: 'Dawn grass sky summer light' }, { small: 'https://i1.wallpaperscraft.com/image/sea_sand_palm_trees_surf_84649_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/sea_sand_palm_trees_surf_84649_602x339.jpg', big: 'https://wallpaperscraft.com/image/sea_sand_palm_trees_surf_84649_1920x1080.jpg', description: 'Sea sand palm trees surf' }, { small: 'https://i1.wallpaperscraft.com/image/stones_tropical_ocean_sky_summer_92472_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/stones_tropical_ocean_sky_summer_92472_602x339.jpg', big: 'https://wallpaperscraft.com/image/stones_tropical_ocean_sky_summer_92472_1920x1080.jpg', description: 'Stones tropical ocean sky summer' }, { small: 'https://i1.wallpaperscraft.com/image/mountains_nature_river_grass_beautiful_landscape_93282_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/mountains_nature_river_grass_beautiful_landscape_93282_602x339.jpg', big: 'https://wallpaperscraft.com/image/mountains_nature_river_grass_beautiful_landscape_93282_1920x1080.jpg', description: 'Mountains nature river grass beautiful landscape' }, { small: 'https://i1.wallpaperscraft.com/image/tree_sun_blue_lilac_krone_spring_flowering_from_below_light_53319_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/tree_sun_blue_lilac_krone_spring_flowering_from_below_light_53319_602x339.jpg', big: 'https://wallpaperscraft.com/image/tree_sun_blue_lilac_krone_spring_flowering_from_below_light_53319_1920x1080.jpg', description: 'Tree sun blue lilac krone spring flowering from below light' }, { small: 'https://i1.wallpaperscraft.com/image/lake_sunset_trees_landscape_beach_art_night_reflection_48159_300x168.jpg', medium: 'https://i1.wallpaperscraft.com/image/lake_sunset_trees_landscape_beach_art_night_reflection_48159_602x339.jpg', big: 'https://wallpaperscraft.com/image/lake_sunset_trees_landscape_beach_art_night_reflection_48159_1920x1080.jpg', description: 'Lake sunset trees landscape beach art night reflection' } ] }); myGalleryStyling = new GalleryStylingModel({ container: { class: 'my-gallery' } }); ``` **app.scss** ```css /deep/ .my-gallery { background: black; padding: 1px; } ``` ## Gallery input Properties consists of two main objects: * options; * images. Gallery options is an array. Idea of an array is to apply each array object options based on that object property **breakpoint**, which is working like media query max-width. For example: ```typescript this.galleryOptions = [ // that object options will work by default { width: '600px', height: '400px', thumbnailsColumns: 4, imageAnimation: NgxGalleryAnimation.Slide }, // here we have breakpoint 800 and it means that // those styles will work if screen width is not bigger then 800px { breakpoint: 800, width: '100%', height: '600px', imagePercent: 80, thumbnailsPercent: 20, thumbnailsMargin: 20, thumbnailMargin: 20 }, // here we have breakpoint 400 and it means that // those styles will work if screen width is not bigger then 400px { breakpoint: 400, preview: false } ]; ``` ## Gallery options properties | Attr | Type | Details | | :----------------------: | :-----: | ------------------------------------------------------------------------------------------ | | width | string | Default value: '500px' - gallery width. | | height | string | Default value: '400px' - gallery height | | breakpoint | number | Default value: **undefined** - responsive breakpoint, works like media query **max-width** | | fullWidth | boolean | Default value: false - sets the same width as browser | | image | boolean | Default value: true - enables or disables image | | imagePercent | number | Default value: 75 - percentage height | | imageArrows | boolean | Default value: true - enables or disables arrows | | imageArrowsAutoHide | boolean | Default value: false - enables or disables arrows auto hide | | imageSwipe | boolean | Default value: false - enables or disables swipe | | imageAnimation | string | Default value: **NgxGalleryAnimation.Fade** - animation type | | imageSize | string | Default value: NgxGalleryImageSize.Cover - image size | | thumbnails | boolean | Default value: true - enables or disables thumbnails | | thumbnailsColumns | number | Default value: 4 - columns count | | thumbnailsRows | number | Default value: 1 - rows count | | thumbnailsPercent | number | Default value: 25 - percentage height | | thumbnailsMargin | number | Default value: 10 - margin between thumbnails and image | | thumbnailsArrows | boolean | Default value: true - enables or disables arrows | | thumbnailsArrowsAutoHide | string | Default value: false - enables or disables arrows auto hide | | thumbnailsSwipe | boolean | Default value: false - enables or disables swipe | | thumbnailMargin | number | Default value: 10 - margin between images in thumbnails | | preview | boolean | Default value: true - enables or disables preview | | previewDescription | boolean | Default value: true - enables or disables description for images | | previewSwipe | boolean | Default value: false - enables or disables swipe | | previewCloseOnClick | boolean | Default value: false - enables or disables closing preview by click | Gallery animations (4 types) can be set like this: ```typescript imageAnimation: NgxGalleryAnimation.Fade imageAnimation: NgxGalleryAnimation.Slide imageAnimation: NgxGalleryAnimation.Rotate imageAnimation: NgxGalleryAnimation.Zoom ``` Gallery images is an array with options for each gallery slide. Gallery image sizes (2 types) can be set like this: ```typescript imageSize: NgxGalleryImageSize.Cover imageSize: NgxGalleryImageSize.Contain ``` ## Gallery image properties | Attr | Type | Details | | :---------: | :----: | --------------------------- | | small | string | Url used in thumbnails | | medium | string | Url used in image | | big | string | Url used in preview | | description | string | Description used in preview |