Gallery

Component is build based on NgxGallery

Usage

app.html

<cf-gallery [properties]="myGallery" [styling]="myGalleryStyling"></cf-gallery>

app.ts

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

/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:

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:

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:

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