16.0.4 • Published 2 years ago

ngx-gallery-v16 v16.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

NgxGallery

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

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

@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 */
}
ngx-gallery-16
tslib
@everything-registry/sub-chunk-2284
16.0.4

2 years ago

16.0.3

2 years ago