ngx-gallery is a simple but full-featured image gallery for Angular 2/4 apps.

angular image gallery example, ngx image gallery, angular material image gallery, angular gallery grid, angular image gallery with thumbnails

Features:

• Custom layout
• Navigation arrows
• Autoplay
• Multi-row thumbnail navigation
• Fullscreen mode
• Touch-enabled
• Custom animations

How to make use of it:

Installation

npm install ngx-gallery --save

Usage

// app.module.ts
import { NgxGalleryModule } from 'ngx-gallery';
...
@NgModule({
    imports: [
        ...
        NgxGalleryModule
        ...
    ],
    ...
})
export class AppModule { }

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
...

@Component({
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
    galleryOptions: NgxGalleryOptions[];
    galleryImages: NgxGalleryImage[];

    ngOnInit(): void {

        this.galleryOptions = [
            {
                width: '600px',
                height: '400px',
                thumbnailsColumns: 4,
                imageAnimation: NgxGalleryAnimation.Slide
            },
            // max-width 800
            {
                breakpoint: 800,
                width: '100%',
                height: '600px',
                imagePercent: 80,
                thumbnailsPercent: 20,
                thumbnailsMargin: 20,
                thumbnailMargin: 20
            },
            // max-width 400
            {
                breakpoint: 400,
                preview: false
            }
        ];

        this.galleryImages = [
            {
                small: 'assets/1-small.jpg',
                medium: 'assets/1-medium.jpg',
                big: 'assets/1-big.jpg'
            },
            {
                small: 'assets/2-small.jpg',
                medium: 'assets/2-medium.jpg',
                big: 'assets/2-big.jpg'
            },
            {
                small: 'assets/3-small.jpg',
                medium: 'assets/3-medium.jpg',
                big: 'assets/3-big.jpg'
            }
        ];
    }
}

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

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 the browser

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

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

• linkTarget | Type: string | Default value: _blank – sets the target attribute of the 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 autoplay

• 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 – the 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 the last item has a label with the 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 – the 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 autoplay

• 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 the download 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 the next arrow

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

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

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

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

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

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

• rotateRightIcon | Type: string | Default value: 'fa fa-repeat' – icon for rotating 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 – a description used in the preview
• url | Type: string – The URL used in the link
• label | Type: string – a label used for aria-label when the 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 the image at the index
• showNext(): void – shows the next image
• showPrev(): void – shows prev image
• canShowNext(): boolean – returns true if there is the 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 the right
• canMoveThumbnailsLeft(): boolean – returns true if you can move thumbnails to left
• canMoveThumbnailsRight(): boolean – returns true if you can move thumbnails to the right

angular 2/4 image gallery, ngx-gallery Plugin/Github, ngx gallery github, angular image collage

See Demo And Download

Official Website(lukasz-galka): Click Here

This superior jQuery/javascript plugin is developed by lukasz-galka. For extra advanced usage, please go to the official website.