Nuns Playing Monopoly

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

    1.0.6 • Public • Published

    NgxGallery

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

    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

    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

    // app.module.ts
    import { NgxGalleryModule } from 'ngx-gallery-9';
    ...
    @NgModule({
        imports: [
            ...
            NgxGalleryModule
            ...
        ],
        ...
    })
    export class AppModule { }
    // app.component.ts
    import { Component, OnInit } from '@angular/core';
    import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery-9';
    ...
     
    @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
    >>> .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 */
    }
    

    Keywords

    none

    Install

    npm i ngx-gallery-9

    DownloadsWeekly Downloads

    2,411

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    1.29 MB

    Total Files

    69

    Last publish

    Collaborators

    • mahnadev