Angular image gallery plugin Based on [NgxGallery],Compatible with Angular 16+
npm install ngx-gallery-v16npm 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-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
``ts
// app.module.ts
import { NgxGalleryModule } from 'ngx-gallery-v16';
...
@NgModule({
imports: [
...
NgxGalleryModule
...
],
...
})
export class AppModule { }
``
``ts
// 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'
}
];
}
}
``
``html
// app.component.html
``
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 /
}
``