Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-gallery-15

Package Overview
Dependencies
Maintainers
0
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-gallery-15

Angular image gallery plugin Based on [NgxGallery](https://github.com/lukasz-galka/ngx-gallery), Compatible with Angular 17+

  • 18.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
152
increased by55.1%
Maintainers
0
Weekly downloads
 
Created
Source

NgxGallery

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

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"
]

npm install hammerjs --save

import 'hammerjs';

SystemJS

If you are not using SystemJS you can skip this section.

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

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

FAQs

Package last updated on 19 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc