项目作者: bentzibentz

项目描述 :
Angular image gallery overlay, optimized for mobile and web.
高级语言: TypeScript
项目地址: git://github.com/bentzibentz/ngx-gallery-overlay.git
创建时间: 2020-02-13T14:40:50Z
项目社区:https://github.com/bentzibentz/ngx-gallery-overlay

开源协议:MIT License

下载


Angular Image Gallery Overlay

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

npm
npm
npm

Docs

Dependencies

ngx image overlay depends on the angular cdk.

  1. Angular CDK

NPM

  1. npm i @angular/cdk

YARN

  1. yarn add @angular/cdk

Installation

NPM

  1. npm i ngx-image-overlay

YARN

  1. 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.

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. /* Import the overlay provider*/
  4. import { Overlay } from '@angular/cdk/overlay';
  5. import { AppComponent } from './app.component';
  6. @NgModule({
  7. declarations: [
  8. AppComponent
  9. ],
  10. imports: [
  11. BrowserModule,
  12. NgxImageOverlayModule // Import here
  13. ],
  14. providers: [
  15. Overlay // Import here
  16. ],
  17. bootstrap: [AppComponent]
  18. })
  19. export class AppModule { }

2. Use in your HTML

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

  1. <lib-ngx-image-overlay
  2. [thumbnail]='image'
  3. [meta]='meta'
  4. [gallery]='gallery'>
  5. </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:

  1. image = {
  2. alt: 'Strand ohne Sand',
  3. title: 'Strand ohne Sand',
  4. src: 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
  5. srcSet: [
  6. 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80 616w',
  7. 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80 444w',
  8. 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80 718w'
  9. ],
  10. sizes: [
  11. '(max-width: 30em) 100vw',
  12. '(max-width: 50em) 50vw',
  13. 'calc(33vw - 100px)'
  14. ],
  15. className: 'yourClassName'
  16. };
  1. meta = {
  2. copyright: 'Unsplash / Photos for everyone',
  3. title: 'Lorem ipsum dolor sit',
  4. buttonLabel: 'Images',
  5. closeLabel: 'Close',
  6. backLabel: 'Back to article',
  7. label: 'photo gallery'
  8. };
  1. gallery = {
  2. meta: this.meta,
  3. images: [
  4. {
  5. url: 'https://images.unsplash.com/photo-1473805776446-12df95e07592?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
  6. title: 'Image Title 1',
  7. 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.',
  8. },
  9. {
  10. url: 'https://images.unsplash.com/photo-1542145748-65931190d151?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80',
  11. title: 'Image Title 2',
  12. 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.',
  13. },
  14. {
  15. url: 'https://images.unsplash.com/photo-1582148459946-2852aa3fb5ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80',
  16. title: 'Image Title 3',
  17. 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.',
  18. },
  19. {
  20. url: 'https://images.unsplash.com/photo-1581922819941-6ab31ab79afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80',
  21. title: 'Image Title 4',
  22. 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.',
  23. },
  24. {
  25. url: 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
  26. title: 'Image Title 5',
  27. 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.',
  28. },
  29. {
  30. url: 'https://images.unsplash.com/photo-1582142689530-e0ed343bb509?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
  31. title: 'Image Title 6',
  32. 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.',
  33. }
  34. ]
  35. };
  • 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