https://github.com/scompiler/red-zoom-angular
RedZoom is a modern very easy-to-use image zoom library which made as Angular directive and fully stylable via CSS/SCSS.
https://github.com/scompiler/red-zoom-angular
angular gallery-images image-zoom magnifier magnifying-glass zoom
Last synced: 21 days ago
JSON representation
RedZoom is a modern very easy-to-use image zoom library which made as Angular directive and fully stylable via CSS/SCSS.
- Host: GitHub
- URL: https://github.com/scompiler/red-zoom-angular
- Owner: scompiler
- License: mit
- Created: 2019-10-01T03:44:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-20T14:01:07.000Z (over 1 year ago)
- Last Synced: 2025-09-09T14:56:27.040Z (6 months ago)
- Topics: angular, gallery-images, image-zoom, magnifier, magnifying-glass, zoom
- Language: TypeScript
- Homepage: https://scompiler.github.io/red-zoom-angular/
- Size: 25.4 MB
- Stars: 34
- Watchers: 2
- Forks: 11
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - red-zoom-angular - A sleek and user-friendly image zoom library, designed as an Angular directive and fully customizable with CSS and SCSS. (Table of contents / Third Party Components)
- awesome-angular - red-zoom-angular - A sleek and user-friendly image zoom library, designed as an Angular directive and fully customizable with CSS and SCSS. (Table of contents / Third Party Components)
README
# RedZoom
RedZoom is a modern very easy-to-use image zoom library which made as
Angular directive and fully stylable via CSS/SCSS.
Examples, documentation, changelog are available [here](https://scompiler.github.io/red-zoom-angular/).
## Getting Started
1. To install RedZoom, run the command below:
```bash
npm install ngx-red-zoom
```
2. Import the RedZoomDirective in the component where you want to use it:
```typescript
import { RedZoomDirective } from 'ngx-red-zoom';
@Component({
selector: 'app-root',
imports: [
RedZoomDirective,
],
templateUrl: './app.html',
styleUrl: './app.scss',
})
export class App { }
```
3. Import styles:
```scss
@use 'ngx-red-zoom/styles/base.scss';
@use 'ngx-red-zoom/styles/style-window.scss';
```
4. Add directive to your image tag:
```angular2html
```