https://github.com/thatisuday/ngx-product-zoom

Show e-commerce product images zoom slideshow in modal for Angular 4+
https://github.com/thatisuday/ngx-product-zoom

angular4 dialog ecommerce modal zoom-images

Last synced: 8 months ago
JSON representation

Show e-commerce product images zoom slideshow in modal for Angular 4+

• Host: GitHub
• URL: https://github.com/thatisuday/ngx-product-zoom
• Owner: thatisuday
• Created: 2017-09-14T18:19:42.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-19T17:09:05.000Z (over 7 years ago)
• Last Synced: 2025-02-16T21:08:36.035Z (8 months ago)
• Topics: angular4, dialog, ecommerce, modal, zoom-images
• Language: CSS
• Homepage:
• Size: 916 KB
• Stars: 0
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## ecom-product-zoom-modal

Show e-commerce product images zoom slideshow in modal for Angular 4+

![](https://i.imgur.com/G7BUfph.png)

[*__preview__*](https://rawgit.com/thatisuday/ecom-product-zoom-modal/master/demo/dist/index.html)

[![npm](https://img.shields.io/npm/dt/@plency/ecom-product-zoom-modal.svg?style=flat-square)](https://www.npmjs.com/package/@plency/ecom-product-zoom-modal)

[![npm](https://img.shields.io/npm/v/@plency/ecom-product-zoom-modal.svg?style=flat-square)](https://www.npmjs.com/package/@plency/ecom-product-zoom-modal)

[![David](https://img.shields.io/david/thatisuday/@plency/ecom-product-zoom-modal.svg?style=flat-square)](https://www.npmjs.com/package/@plency/ecom-product-zoom-modal)

## Install

```

npm install @plency/ecom-product-zoom-modal

```

## Import Module

```

import { EcomProductZoomModalModule } from '@plency/ecom-product-zoom-modal';

@NgModule({

  ...,

  imports: [

    ...,

    EcomProductZoomModalModule

  ]

})

```

## Use

```

import { Component, OnInit } from '@angular/core';

import { EcomProductZoomModalImage, EcomProductZoomModalService } from '@plency/ecom-product-zoom-modal';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  images: EcomProductZoomModalImage[] = [{

    img: 'large-1.jpg',

    thumb: 'small-1.jpg'

  }, {

    img: 'large-2.jpg',

    thumb: 'small-2.jpg'

  }, {

    img: 'large-3.jpg',

    thumb: 'small-3.jpg'

  }];

  

  constructor(

    private prodZoomModalService: EcomProductZoomModalService

  ) { }

  ngOnInit() {

  }

  openModal() {

    this.prodZoomModalService.open(this.images);

  }

}

```