saeedspate/ngx-gallery-9

Angular Image Gallery based on Ngx-Gallery

NgxGallery

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

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';

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 */
}

ngx-gallery-9's Issues

Feature Request: Update NgxGalleryLayout to have Left and Right

Hi @SaeedSpate, thanks for this wonderful work. I mean it functional and easy to integrate.

I do have a feature request, kindly consider the ability to have a layout where the Thumbnail can be set to right or left.

Thanks

Upgrade to Angular@16 Compatibility with Ivy

When installing angular 16 using npm install after deleting node_modules folder (fresh install)

getting this error

 This likely means that the library (ngx-gallery-9) which declares NgxGalleryModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Request you to update

Thanks in advance

Preview image with angular 10 and material design, close, full screen is not displayed

I have the angular material with angular 10, on the preview screen there is no cross, zoom and full screen button displayed

Not supported for Angular 11

I Cant swipe event after adding hammer.js

I have added hammer.js in main.ts and where i'm using gallery but swipe not working

Image arrow not displayed with angular material 10

Working with angular 10 with material design the arrow on the image and thumbnail is not displayed, however setting with the thumbnailsArrows: true seems not to be working

I don't want to install font-awesome.css, Since I am using angular material

Swipe Not Working

The swipe is not working. I tried all the fixes recommended in community but no chance.

here are the configs:

this.galleryOptions = [
{
width: '100%',
height: '600px',
thumbnailsColumns: 4,
lazyLoading: false,
imageAnimation: NgxGalleryAnimation.Slide,
imageArrows: true,
thumbnailsArrows: true,
imageSwipe: true,
thumbnailsSwipe: true,
previewSwipe: true,
thumbnailsRemainingCount: true
},
{
breakpoint: 960,
width: '100%',
height: '450px',
preview: true,
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 10
},
{
breakpoint: 400,
height: '300px',
thumbnailsPercent: 40,
thumbnailsColumns: 3,
thumbnailMargin: 10
}

Can I use url directly from server to serve images?

Qustion as the title says.

"export 'NgxGalleryAnimation' was not found in 'ngx-gallery-9'

Hello and thanks for the plugin update,

just installed it on my recently upgraded angular 9 project and when I try to import to my ts component it says that there was no export for the 3 main modules: NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation

when I navigate to 'ngx-gallery-9' it shows me this:

/**

• Generated bundle index. Do not edit.
  */
  export * from './public-api';
  export { NgxGalleryActionComponent as ɵe } from './lib/ngx-gallery-action/ngx-gallery-action.component';
  export { NgxGalleryArrowsComponent as ɵf } from './lib/ngx-gallery-arrows/ngx-gallery-arrows.component';
  export { NgxGalleryBulletsComponent as ɵg } from './lib/ngx-gallery-bullets/ngx-gallery-bullets.component';
  export { NgxGalleryHelperService as ɵa } from './lib/ngx-gallery-helper.service';
  export { NgxGalleryImageComponent as ɵc } from './lib/ngx-gallery-image/ngx-gallery-image.component';
  export { NgxGalleryPreviewComponent as ɵb } from './lib/ngx-gallery-preview/ngx-gallery-preview.component';
  export { NgxGalleryThumbnailsComponent as ɵd } from './lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component';

Could not resolve dependency: npm ERR! peer tslib@"^1.10.0" from [email protected]

With latest angular project the peer dependency is not working

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tslib
npm ERR!   tslib@"^2.3.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer tslib@"^1.10.0" from [email protected]
npm ERR! node_modules/ngx-gallery-9
npm ERR!   ngx-gallery-9@"^1.0.6" from the root project

Can we update the peer dependency

I Cant swipe event after adding hammer.js

could you help me for swipe

Move the thumbnail to the left instead of top and bottom

Hi this component is very useful, is there any way to move the thumbnail to the left or right, just instead of top and bottom