npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

118

Readme

npm version Downloads licence Build Status Coverage Status

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

Demo Site

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

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 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';
...
@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 */
}