NgxGallery

Angular image gallery plugin Based on NgxGallery, Compatible with Angular 9+

Prerequisites

• Font Awesome (required for icons)

npm install font-awesome --save

For angular-cli based projects insert styles into .angular-cli.json

"styles": [
    ...
    "../node_modules/font-awesome/css/font-awesome.css"
]

• Hammerjs (required for swipe)

npm install hammerjs --save

import 'hammerjs';

SystemJS

If you are not using SystemJS you can skip this section.

map: {
  'ngx-gallery-9': 'node_modules/ngx-gallery-9/bundles/ngx-gallery-9.umd.js',
}

Angular Material

If you are not using Angular Material you can skip this section.

Angular Material is using transform: translate3d(0,0,0); in components styles. Unfortunately transform changes positioning context and preview won't work properly. To avoid this situation you have to override material styles, for example:

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; // your theme

.mat-sidenav-container, .mat-sidenav-content, .mat-tab-body-content {
    transform: none !important;
}

You can read more about this issue here

Installation

npm install ngx-gallery-9 --save

NgxGalleryOptions

• width | Type: string | Default value: '500px' - gallery width

• height | Type: string | Default value: '400px' - gallery height

• breakpoint | Type: number | Default value: undefined - responsive breakpoint, works like media query max-width

• fullWidth | Type: boolean | Default value: false - sets the same width as browser

• layout | Type: string | Default value: NgxGalleryLayout.Bottom - sets thumbnails position

• startIndex | Type: number | Default value: 0 - sets index of selected image on start

• linkTarget | Type: string | Default value: _blank - sets target attribute of link

• lazyLoading | Type: boolean | Default value: true - enables/disables lazy loading for images

• image | Type: boolean | Default value: true - enables or disables image

• imageDescription | Type: boolean | Default value: true - enables or disables description for images

• imagePercent | Type: number | Default value: 75 - percentage height

• imageArrows | Type: boolean | Default value: true - enables or disables arrows

• imageArrowsAutoHide | Type: boolean | Default value: false - enables or disables arrows auto hide

• imageSwipe | Type: boolean | Default value: false - enables or disables swipe

• imageAnimation | Type: string | Default value: NgxGalleryAnimation.Fade - animation type

• imageSize | Type: string | Default value: NgxGalleryImageSize.Cover - image size

• imageAutoPlay | Type: boolean | Default value false - enables or disables auto play

• imageAutoPlayInterval | Type: number | Default value: 2000 - interval for auto play (ms)

• imageAutoPlayPauseOnHover | Type: boolean | Default value: false - enables or disables pouse auto play on hover

• imageInfinityMove | Type: boolean | Default value: false - enables or disables infinity move by arrows

• imageActions | Type: NgxGalleryAction[] | Default value: [] - Array of custom actions

• imageBullets | Type: boolean | Default value: false - enables or disables navigation bullets

• thumbnails | Type: boolean | Default value: true - enables or disables thumbnails

• thumbnailsColumns | Type: number | Default value: 4 - columns count

• thumbnailsRows | Type: number | Default value: 1 - rows count

• thumbnailsPercent | Type: number | Default value: 25 - percentage height

• thumbnailsMargin | Type: number | Default value: 10 - margin between thumbnails and image

• thumbnailsArrows | Type: boolean | Default value: true - enables or disables arrows

• thumbnailsArrowsAutoHide | boolean: string | Default value: false - enables or disables arrows auto hide

• thumbnailsSwipe | Type: boolean | Default value: false - enables or disables swipe

• thumbnailsMoveSize | Type: number | Default value: 1 - number of items to move on arrow click

• thumbnailsOrder | Type: number | Default value: NgxGalleryOrder.Column - images order

• thumbnailsRemainingCount | Type: boolean | Default value: false - if true arrows are disabled and last item has label with remaining count

• thumbnailsAsLinks | Type: boolean | Default value: false - enables or disables links on thumbnails

• thumbnailsAutoHide | Type: boolean | Default value: false - hides thumbnails if there is only one image

• thumbnailMargin | Type: number | Default value: 10 - margin between images in thumbnails

• thumbnailSize | Type: string | Default value: NgxGalleryImageSize.Cover - thumbnail size

• thumbnailActions | Type: NgxGalleryAction[] | Default value: [] - Array of custom actions

• preview | Type: boolean | Default value: true - enables or disables preview

• previewDescription | Type: boolean | Default value: true - enables or disables description for images

• previewArrows | Type: boolean | Default value: true - enables or disables arrows

• previewArrowsAutoHide | boolean: string | Default value: false - enables or disables arrows auto hide

• previewSwipe | Type: boolean | Default value: false - enables or disables swipe

• previewFullscreen | Type: boolean | Default value: false - enables or disables fullscreen icon

• previewForceFullscreen | Type: boolean | Default value: false - enables or disables opening preview in fullscreen mode

• previewCloseOnClick | Type: boolean | Default value: false - enables or disables closing preview by click

• previewCloseOnEsc | Type: boolean | Default value: false - enables or disables closing preview by esc keyboard

• previewKeyboardNavigation | Type: boolean | Default value: false - enables or disables navigation by keyboard

• previewAnimation | Type: boolean | Default value: true - enables or disables image loading animation

• previewAutoPlay | Type: boolean | Default value false - enables or disables auto play

• previewAutoPlayInterval | Type: number | Default value: 2000 - interval for auto play (ms)

• previewAutoPlayPauseOnHover | Type: boolean | Default value: false - enables or disables pouse auto play on hover

• previewInfinityMove | Type: boolean | Default value: false - enables or disables infinity move by arrows

• previewZoom | Type: boolean | Default value: false - enables or disables zoom in and zoom out

• previewZoomStep | Type: number | Default value: 0.1 - step for zoom change

• previewZoomMax | Type: number | Default value: 2 - max value for zoom

• previewZoomMin | Type: number | Default value: 0.5 - min value for zoom

• previewRotate | Type: boolean | Default value: false - enables or disables rotate buttons

• previewDownload | Type: boolean | Default value: false - enables or disables downoad button

• previewBullets | Type: boolean | Default value: false - enables or disables navigation bullets

• arrowPrevIcon | Type: string | Default value: 'fa fa-arrow-circle-left' - icon for prev arrow

• arrowNextIcon | Type: string | Default value: 'fa fa-arrow-circle-right' - icon for next arrow

• closeIcon | Type: string | Default value: 'fa fa-times-circle' - icon for close button

• fullscreenIcon | Type: string | Default value: 'fa fa-arrows-alt' - icon for fullscreen button

• spinnerIcon | Type: string | Default value: 'fa fa-spinner fa-pulse fa-3x fa-fw' - icon for spinner

• zoomInIcon | Type: string | Default value: 'fa fa-search-plus' - icon for zoom in

• zoomOutIcon | Type: string | Default value: 'fa fa-search-minus' - icon for zoom out

• rotateLeftIcon | Type: string | Default value: 'fa fa-undo' - icon for rotate left

• rotateRightIcon | Type: string | Default value: 'fa fa-repeat' - icon for rotate right

• downloadIcon | Type: string | Default value: 'fa fa-arrow-circle-down' - icon for download

• actions | Type: NgxGalleryAction[] | Default value: [] - Array of new custom actions that will be added to the left of the current close/zoom/fullscreen icons

NgxGalleryImage

• small | Type: string | SafeResourceUrl - url used in thumbnails
• medium | Type: string | SafeResourceUrl - url used in image
• big | Type: string | SafeResourceUrl - url used in preview
• description | Type: string - description used in preview
• url | Type: string - url used in link
• label | Type: string - label used for aria-label when thumbnail is a link

NgxGalleryAnimation

• Fade (default)
• Slide
• Rotate
• Zoom

NgxGalleryImageSize

• Cover (default)
• Contain

NgxGalleryLayout

• Top
• Bottom (default)

NgxGalleryOrder

• Column (default)
• Row
• Page

Examples for

NgxGalleryAction

• icon | Type: string - icon for custom action
• disabled | Type: boolean | Default value: false - if the icon should be disabled
• titleText | Type: string | Default value: '' - text to set the title attribute to
• onClick | Type: (event: Event, index: number) => void - Output function to call when custom action icon is clicked

Events

• change - triggered on image change
• imagesReady - triggered when images length > 0
• previewOpen - triggered on preview open
• previewClose - triggered on preview close
• previewChange - triggered on preview image change

Methods

• show(index: number): void - shows image at index
• showNext(): void - shows next image
• showPrev(): void - shows prev image
• canShowNext(): boolean - returns true if there is next image
• canShowPrev(): boolean - returns true if there is prev image
• openPreview(index: number): void - opens preview at index
• moveThumbnailsLeft(): void - moves thumbnails to left
• moveThumbnailsRight(): void - moves thumbnails to right
• canMoveThumbnailsLeft(): boolean - returns true if you can move thumbnails to left
• canMoveThumbnailsRight(): boolean - returns true if you can move thumbnails to right

Usage

1// app.module.ts
2import { NgxGalleryModule } from 'ngx-gallery-9';
3...
4@NgModule({
5    imports: [
6        ...
7        NgxGalleryModule
8        ...
9    ],
10    ...
11})
12export class AppModule { }

1// app.component.ts
2import { Component, OnInit } from '@angular/core';
3import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery-9';
4...
5
6@Component({

7    templateUrl: './app.component.html',

8    styleUrls: ['./app.component.scss'],
9})
10export class AppComponent implements OnInit {

11    galleryOptions: NgxGalleryOptions[];

12    galleryImages: NgxGalleryImage[];
13
14    ngOnInit(): void {
15
16        this.galleryOptions = [
17            {

18                width: '600px',

19                height: '400px',

20                thumbnailsColumns: 4,

21                imageAnimation: NgxGalleryAnimation.Slide
22            },
23            // max-width 800
24            {

25                breakpoint: 800,

26                width: '100%',

27                height: '600px',

28                imagePercent: 80,

29                thumbnailsPercent: 20,

30                thumbnailsMargin: 20,

31                thumbnailMargin: 20
32            },
33            // max-width 400
34            {

35                breakpoint: 400,

36                preview: false
37            }
38        ];
39
40        this.galleryImages = [
41            {

42                small: 'assets/1-small.jpg',

43                medium: 'assets/1-medium.jpg',

44                big: 'assets/1-big.jpg'
45            },
46            {

47                small: 'assets/2-small.jpg',

48                medium: 'assets/2-medium.jpg',

49                big: 'assets/2-big.jpg'
50            },
51            {

52                small: 'assets/3-small.jpg',

53                medium: 'assets/3-medium.jpg',

54                big: 'assets/3-big.jpg'
55            }
56        ];
57    }
58}
59

1// app.component.html
2<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

Styling

• Active thumbnail

>>> .ngx-gallery-thumbnail.ngx-gallery-active {  
    /* your styles */
}

• Arrow

ngx-gallery >>> .ngx-gallery-arrow {
    /* your styles */
}

• Arrow in particular element

ngx-gallery >>> ngx-gallery-image .ngx-gallery-arrow {
    /* your styles */
}
ngx-gallery >>> ngx-gallery-thumbnails .ngx-gallery-arrow {
    /* your styles */
}
ngx-gallery >>> ngx-gallery-preview .ngx-gallery-arrow {
    /* your styles */
}