@nomadreservations/ngx-gallery
v0.1.5
Published
[![npm version](https://img.shields.io/npm/v/@nomadreservations/ngx-gallery.svg)](https://www.npmjs.com/package/@nomadreservations/ngx-gallery) [![Downloads](https://img.shields.io/npm/dm/@nomadreservations/ngx-gallery.svg)](https://www.npmjs.com/package/
Downloads
111
Keywords
Readme
NgxGallery
@angular image gallery plugin
This is an angular 8+ and ivy friendly fork of https://github.com/lukasz-galka/ngx-gallery and https://github.com/lukasz-galka/ngx-gallery-demo.
This utilizes ng-packagr greater than 5.5.1 to ensure an ivy (@angular 9+ ivy) compatible package.
Demo
Prerequisites
- Font Awesome (required for icons)
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"
]
- Hammerjs (required for swipe)
npm install hammerjs --save
import 'hammerjs';
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 @nomadreservations/ngx-gallery --save
NgxGalleryOptions
width
| Type:string
| Default value:'500px'
- gallery widthheight
| Type:string
| Default value:'400px'
- gallery heightbreakpoint
| Type:number
| Default value:undefined
- responsive breakpoint, works like media query max-widthfullWidth
| Type:boolean
| Default value:false
- sets the same width as browserlayout
| Type:string
| Default value:NgxGalleryLayout.Bottom
- sets thumbnails positionstartIndex
| Type:number
| Default value:0
- sets index of selected image on startlinkTarget
| Type:string
| Default value:_blank
- sets target attribute of linklazyLoading
| Type:boolean
| Default value:true
- enables/disables lazy loading for imagesimage
| Type:boolean
| Default value:true
- enables or disables imageimageDescription
| Type:boolean
| Default value:true
- enables or disables description for imagesimagePercent
| Type:number
| Default value:75
- percentage heightimageArrows
| Type:boolean
| Default value:true
- enables or disables arrowsimageArrowsAutoHide
| Type:boolean
| Default value:false
- enables or disables arrows auto hideimageSwipe
| Type:boolean
| Default value:false
- enables or disables swipeimageAnimation
| Type:string
| Default value:NgxGalleryAnimation.Fade
- animation typeimageSize
| Type:string
| Default value:NgxGalleryImageSize.Cover
- image sizeimageAutoPlay
| Type:boolean
| Default valuefalse
- enables or disables auto playimageAutoPlayInterval
| Type:number
| Default value:2000
- interval for auto play (ms)imageAutoPlayPauseOnHover
| Type:boolean
| Default value:false
- enables or disables pouse auto play on hoverimageInfinityMove
| Type:boolean
| Default value:false
- enables or disables infinity move by arrowsimageActions
| Type:NgxGalleryAction[]
| Default value:[]
- Array of custom actionsimageBullets
| Type:boolean
| Default value:false
- enables or disables navigation bulletsthumbnails
| Type:boolean
| Default value:true
- enables or disables thumbnailsthumbnailsColumns
| Type:number
| Default value:4
- columns countthumbnailsRows
| Type:number
| Default value:1
- rows countthumbnailsPercent
| Type:number
| Default value:25
- percentage heightthumbnailsMargin
| Type:number
| Default value:10
- margin between thumbnails and imagethumbnailsArrows
| Type:boolean
| Default value:true
- enables or disables arrowsthumbnailsArrowsAutoHide
| boolean:string
| Default value:false
- enables or disables arrows auto hidethumbnailsSwipe
| Type:boolean
| Default value:false
- enables or disables swipethumbnailsMoveSize
| Type:number
| Default value:1
- number of items to move on arrow clickthumbnailsOrder
| Type:number
| Default value:NgxGalleryOrder.Column
- images orderthumbnailsRemainingCount
| Type:boolean
| Default value:false
- if true arrows are disabled and last item has label with remaining countthumbnailsAsLinks
| Type:boolean
| Default value:false
- enables or disables links on thumbnailsthumbnailsAutoHide
| Type:boolean
| Default value:false
- hides thumbnails if there is only one imagethumbnailMargin
| Type:number
| Default value:10
- margin between images in thumbnailsthumbnailSize
| Type:string
| Default value:NgxGalleryImageSize.Cover
- thumbnail sizethumbnailActions
| Type:NgxGalleryAction[]
| Default value:[]
- Array of custom actionspreview
| Type:boolean
| Default value:true
- enables or disables previewpreviewDescription
| Type:boolean
| Default value:true
- enables or disables description for imagespreviewArrows
| Type:boolean
| Default value:true
- enables or disables arrowspreviewArrowsAutoHide
| boolean:string
| Default value:false
- enables or disables arrows auto hidepreviewSwipe
| Type:boolean
| Default value:false
- enables or disables swipepreviewFullscreen
| Type:boolean
| Default value:false
- enables or disables fullscreen iconpreviewForceFullscreen
| Type:boolean
| Default value:false
- enables or disables opening preview in fullscreen modepreviewCloseOnClick
| Type:boolean
| Default value:false
- enables or disables closing preview by clickpreviewCloseOnEsc
| Type:boolean
| Default value:false
- enables or disables closing preview by esc keyboardpreviewKeyboardNavigation
| Type:boolean
| Default value:false
- enables or disables navigation by keyboardpreviewAnimation
| Type:boolean
| Default value:true
- enables or disables image loading animationpreviewAutoPlay
| Type:boolean
| Default valuefalse
- enables or disables auto playpreviewAutoPlayInterval
| Type:number
| Default value:2000
- interval for auto play (ms)previewAutoPlayPauseOnHover
| Type:boolean
| Default value:false
- enables or disables pouse auto play on hoverpreviewInfinityMove
| Type:boolean
| Default value:false
- enables or disables infinity move by arrowspreviewZoom
| Type:boolean
| Default value:false
- enables or disables zoom in and zoom outpreviewZoomStep
| Type:number
| Default value:0.1
- step for zoom changepreviewZoomMax
| Type:number
| Default value:2
- max value for zoompreviewZoomMin
| Type:number
| Default value:0.5
- min value for zoompreviewRotate
| Type:boolean
| Default value:false
- enables or disables rotate buttonspreviewDownload
| Type:boolean
| Default value:false
- enables or disables downoad buttonpreviewBullets
| Type:boolean
| Default value:false
- enables or disables navigation bulletsarrowPrevIcon
| Type:string
| Default value:'fa fa-arrow-circle-left'
- icon for prev arrowarrowNextIcon
| Type:string
| Default value:'fa fa-arrow-circle-right'
- icon for next arrowcloseIcon
| Type:string
| Default value:'fa fa-times-circle'
- icon for close buttonfullscreenIcon
| Type:string
| Default value:'fa fa-arrows-alt'
- icon for fullscreen buttonspinnerIcon
| Type:string
| Default value:'fa fa-spinner fa-pulse fa-3x fa-fw'
- icon for spinnerzoomInIcon
| Type:string
| Default value:'fa fa-search-plus'
- icon for zoom inzoomOutIcon
| Type:string
| Default value:'fa fa-search-minus'
- icon for zoom outrotateLeftIcon
| Type:string
| Default value:'fa fa-undo'
- icon for rotate leftrotateRightIcon
| Type:string
| Default value:'fa fa-repeat'
- icon for rotate rightdownloadIcon
| Type:string
| Default value:'fa fa-arrow-circle-down'
- icon for downloadactions
| 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 thumbnailsmedium
| Type:string | SafeResourceUrl
- url used in imagebig
| Type:string | SafeResourceUrl
- url used in previewdescription
| Type:string
- description used in previewurl
| Type:string
- url used in linklabel
| 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 actiondisabled
| Type:boolean
| Default value:false
- if the icon should be disabledtitleText
| Type:string
| Default value:''
- text to set the title attribute toonClick
| Type:(event: Event, index: number) => void
- Output function to call when custom action icon is clicked
Events
change
- triggered on image changeimagesReady
- triggered when images length > 0previewOpen
- triggered on preview openpreviewClose
- triggered on preview closepreviewChange
- triggered on preview image change
Methods
show(index: number): void
- shows image at indexshowNext(): void
- shows next imageshowPrev(): void
- shows prev imagecanShowNext(): boolean
- returns true if there is next imagecanShowPrev(): boolean
- returns true if there is prev imageopenPreview(index: number): void
- opens preview at indexmoveThumbnailsLeft(): void
- moves thumbnails to leftmoveThumbnailsRight(): void
- moves thumbnails to rightcanMoveThumbnailsLeft(): boolean
- returns true if you can move thumbnails to leftcanMoveThumbnailsRight(): boolean
- returns true if you can move thumbnails to right
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 '@nomadreservations/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
::ng-deep .ngx-gallery-thumbnail.ngx-gallery-active {
/* your styles */
}
- Arrow
ngx-gallery ::ng-deep .ngx-gallery-arrow {
/* your styles */
}
- Arrow in particular element
ngx-gallery ::ng-deep ngx-gallery-image .ngx-gallery-arrow {
/* your styles */
}
ngx-gallery ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow {
/* your styles */
}
ngx-gallery ::ng-deep ngx-gallery-preview .ngx-gallery-arrow {
/* your styles */
}