Big news!Introducing Socket AI - ChatGPT-Powered Threat Analysis. Learn more
Socket
Log inDemoInstall

ngx-image-gallery

Package Overview
Dependencies
0
Maintainers
2
Versions
31
Issues
File Explorer

Advanced tools

ngx-image-gallery

Due to my hectic schedule, it is getting hard to maintain this repository. If anybody is interested to work on this project, please give a pull request to fix some critical issues and enhancements.

    2.0.5latest
    npm

Version published
Maintainers
2
Weekly downloads
517
decreased by-30.32%

Weekly downloads

Readme

Source

Need maintainers

Due to my hectic schedule, it is getting hard to maintain this repository. If anybody is interested to work on this project, please give a pull request to fix some critical issues and enhancements.


Probably the best Angular 4+ modal and inline image gallery. Angular upgrade for ng-image-gallery.

preview

npm npm David preview

Prerequisites

  • Hammerjs (required for swipe)
npm i -S hammerjs lodash

Then import hammerjs into your project (tip: in you main.ts file), e.g:

import 'hammerjs'; import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } document.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); });

Install

npm install --save ngx-image-gallery

Import

import { NgxImageGalleryModule } from 'ngx-image-gallery'; @NgModule({ ..., imports: [ NgxImageGalleryModule, ... ] }) export class AppModule { }

Use

// app.component.html <ngx-image-gallery [images]="images" [conf]="conf" (onOpen)="galleryOpened($event)" (onClose)="galleryClosed()" (onImageClicked)="galleryImageClicked($event)" (onImageChange)="galleryImageChanged($event)" (onDelete)="deleteImage($event)" ></ngx-image-gallery>

Configure

import { Component, OnInit, ViewChild } from '@angular/core'; import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { // get reference to gallery component @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent; // gallery configuration conf: GALLERY_CONF = { imageOffset: '0px', showDeleteControl: false, showImageTitle: false, }; // gallery images images: GALLERY_IMAGE[] = [ { url: "https://images.pexels.com/photos/669013/pexels-photo-669013.jpeg?w=1260", altText: 'woman-in-black-blazer-holding-blue-cup', title: 'woman-in-black-blazer-holding-blue-cup', thumbnailUrl: "https://images.pexels.com/photos/669013/pexels-photo-669013.jpeg?w=60" }, { url: "https://images.pexels.com/photos/669006/pexels-photo-669006.jpeg?w=1260", altText: 'two-woman-standing-on-the-ground-and-staring-at-the-mountain', extUrl: 'https://www.pexels.com/photo/two-woman-standing-on-the-ground-and-staring-at-the-mountain-669006/', thumbnailUrl: "https://images.pexels.com/photos/669006/pexels-photo-669006.jpeg?w=60" }, ]; constructor(){} ngOnInit() {} // METHODS // open gallery openGallery(index: number = 0) { this.ngxImageGallery.open(index); } // close gallery closeGallery() { this.ngxImageGallery.close(); } // set new active(visible) image in gallery newImage(index: number = 0) { this.ngxImageGallery.setActiveImage(index); } // next image in gallery nextImage(index: number = 0) { this.ngxImageGallery.next(); } // prev image in gallery prevImage(index: number = 0) { this.ngxImageGallery.prev(); } /**************************************************/ // EVENTS // callback on gallery opened galleryOpened(index) { console.info('Gallery opened at index ', index); } // callback on gallery closed galleryClosed() { console.info('Gallery closed.'); } // callback on gallery image clicked galleryImageClicked(index) { console.info('Gallery image clicked with index ', index); } // callback on gallery image changed galleryImageChanged(index) { console.info('Gallery image changed to index ', index); } // callback on user clicked delete button deleteImage(index) { console.info('Delete image at index ', index); } }

Interfaces

// gallery configuration export interface GALLERY_CONF { imageBorderRadius?: string; // css border radius of image (default 3px) imageOffset?: string; // add gap between image and it's container (default 20px) imagePointer? :boolean; // show a pointer on image, should be true when handling onImageClick event (default false) showDeleteControl?: boolean; // show image delete icon (default false) showCloseControl?: boolean; // show gallery close icon (default true) showExtUrlControl?: boolean; // show image external url icon (default true) showImageTitle?: boolean; // show image title text (default true) showThumbnails?: boolean; // show thumbnails (default true) closeOnEsc?: boolean; // close gallery on `Esc` button press (default true) reactToKeyboard?: boolean; // change image on keyboard arrow press (default true) reactToMouseWheel?: boolean; // change image on mouse wheel scroll (default true) reactToRightClick?: boolean; // disable right click on gallery (default false) thumbnailSize?: number; // thumbnail size (default 30) backdropColor?: string; // gallery backdrop (background) color (default rgba(13,13,14,0.85)) inline?: boolean; // make gallery inline (default false) showArrows?: boolean; // show prev / next arrows (default true) } // gallery image export interface GALLERY_IMAGE { url: string; // url of the image thumbnailUrl?: string; // thumbnail url (recommended), if not present, gallery will use `url` property to get thumbnail image. altText?: string; // alt text for image title?: string; // title of the image extUrl?: string; // external url of image extUrlTarget?: string; // external url target e.g. '_blank', '_self' etc. }

All properties ending with ? are optional.

You can make gallery inline like a carousel by setting conf.inline to true but make sure to change conf.backdropColor as well if you need white backdrop color. Also width and height of the gallery can be adjusted by manually applying css styles with !important flag on gallery element.

Dynamic Update

You can update gallery images images and gallery configuration conf anytime you want even when gallery is opened but due to Angular's change detection restrictions you must assign these variable to new value instead of changing internal properties as mentioned below.

// change images this.images = this.images.concat([...]); // change conf this.conf = {...};

FAQs

Last updated on 18 May 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc