Nature's Particle Manager

    ngx-gallery-test
    TypeScript icon, indicating that this package has built-in type declarations

    4.6.5 • Public • Published

    npm version Downloads DevDependencies licence Build Status Coverage Status

    NgxGallery

    Angular image gallery plugin

    Demo

    Link

    Playground

    You can play with gallery using Plunker or CodePen

    Prerequisites

    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"
    ]
    

    npm install hammerjs --save

    import 'hammerjs';
    

    SystemJS

    map: {
      'ngx-gallery': 'node_modules/ngx-gallery/bundles/ngx-gallery.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 --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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    • 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

    NgxGalleryAnimation

    • Fade (default)
    • Slide
    • Rotate
    • Zoom

    NgxGalleryImageSize

    • Cover (default)
    • Contain

    NgxGalleryLayout

    • Top
    • Bottom (default)

    NgxGalleryOrder

    • Column (default)
    • Row

    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) => 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

    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>

    Styling

    • Active thumbnail
    /deep/ .ngx-gallery-thumbnail.ngx-gallery-active {  
        /* your styles */
    }
    
    • Arrow
    ngx-gallery /deep/ .ngx-gallery-arrow {
        /* your styles */
    }
    
    • Arrow in particular element
    ngx-gallery /deep/ ngx-gallery-image .ngx-gallery-arrow {
        /* your styles */
    }
    ngx-gallery /deep/ ngx-gallery-thumbnails .ngx-gallery-arrow {
        /* your styles */
    }
    ngx-gallery /deep/ ngx-gallery-preview .ngx-gallery-arrow {
        /* your styles */
    }
    

    Donate

    If you like my work you can buy me a 🍺 or 🍕 Donate

    Install

    npm i ngx-gallery-test

    DownloadsWeekly Downloads

    40

    Version

    4.6.5

    License

    MIT

    Last publish

    Collaborators

    • dmcnamara1