Angular Image Gallery Overlay

Add beautiful image gallery overlay to your project, inspired by the new spiegel magazin image gallery.

Docs

Dependencies

ngx image overlay depends on the angular cdk.

1. Angular CDK

NPM

npm i @angular/cdk

YARN

yarn add @angular/cdk

Installation

NPM

npm i ngx-image-overlay

YARN

yarn add ngx-image-overlay

Usage

Follow below steps to add ngx image overlay to your project

1. Import Overlay from the angular cdk

You need to import the Overlay in the providers array of your app where you want to use it.

You need to import the NgxImageOverlayModule in the module of your app where you want to use it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

/* Import the overlay provider*/
import { Overlay } from '@angular/cdk/overlay';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxImageOverlayModule // Import here
    ],
    providers: [
        Overlay // Import here
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Use in your HTML

In your HTML: Use the <lib-ngx-image-overlay> wherever you like in your project.

<lib-ngx-image-overlay  
    [thumbnail]='image' 
    [meta]='meta'
    [gallery]='gallery'>
</lib-ngx-image-overlay>

3. Structure of data to display the image overlay

Make sure the structure of your objects should look like the objects shown below:

image = {
    alt: 'Strand ohne Sand',
    title: 'Strand ohne Sand',
    src: 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
    srcSet: [
        'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80 616w',
        'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80 444w',
        'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80 718w'
    ],
    sizes: [
        '(max-width: 30em) 100vw',
        '(max-width: 50em) 50vw',
        'calc(33vw - 100px)'
    ],
    className: 'yourClassName'
};

meta = {
    copyright: 'Unsplash / Photos for everyone',
    title: 'Lorem ipsum dolor sit',
    buttonLabel: 'Images',
    closeLabel: 'Close',
    backLabel: 'Back to article',
    label: 'photo gallery'
};

gallery = {
    meta: this.meta,
    images: [
        {
            url: 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
            title: 'Image Title 1',
            description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
        },
        {
            url: 'https://images.unsplash.com/photo-1542145748-65931190d151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80',
            title: 'Image Title 2',
            description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
        },
        {
            url: 'https://images.unsplash.com/photo-1582148459946-2852aa3fb5ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
            title: 'Image Title 3',
            description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
        },
        {
            url: 'https://images.unsplash.com/photo-1581922819941-6ab31ab79afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
            title: 'Image Title 4',
            description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
        },
        {
            url: 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
            title: 'Image Title 5',
            description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
        },
        {
            url: 'https://images.unsplash.com/photo-1582142689530-e0ed343bb509?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
            title: 'Image Title 6',
            description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
        }
    ]
};

• Package is not production ready, development only.

Issues

If you identify any errors in this module, or have an idea for an improvement, please feel free to submit an PR.

Author

Fabian Bentz

• github/bentzibentz