ngx-ionic-image-viewer
Advanced tools
An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
npm install --save ngx-ionic-image-viewer
Import the module and add it to your imports section in your main AppModule:
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
...
@NgModule({
imports: [
NgxIonicImageViewerModule
],
})
export class AppModule {}
Import the module and add it to your imports section of your component where you want to use it (e.g. home.module.ts):
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
...
@NgModule({
imports: [
NgxIonicImageViewerModule
],
})
export class HomePageModule {}
Add ion-img-viewer within the HTML of your module (e.g. home.page.html)
<ion-img-viewer
title="Demo"
text="Component"
scheme="dark"
src="./assets/img/demo.jpg">
</ion-img-viewer>
Add ionImgViewer as a directive within the ion-img HTML element of your module (e.g. home.page.html)
<ion-img
ionImgViewer
title="Demo"
text="Directive"
scheme="light"
src="./assets/img/demo.jpg">
</ion-img>
alt | |
|---|---|
| Description | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. |
| Attribute | alt |
| Type | string | undefined |
scheme | |
| Description | Sets the color scheme. |
| Attribute | scheme |
| Type | "auto" | "dark" | "light" | undefined |
| Default | "auto" |
slideOptions | |
| Description | Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options. |
| Attribute | slideOptions |
| Type | object | undefined |
| Default | { centeredSlides: true, passiveListeners: false, zoom: { enabled: true } } |
src | |
| Description | The image URL. This attribute is mandatory for the <img> element. |
| Attribute | src |
| Type | string | undefined |
srcHighRes | |
| Description | The Image URL to display a high-resolution image instead of the original image when opening the viewer. |
| Attribute | srcHighRes |
| Type | string | undefined |
text | |
| Description | Sets the text in the footer of the viewer. |
| Attribute | text |
| Type | string | undefined |
title | |
| Description | Sets the title in the header of the viewer. |
| Attribute | title |
| Type | string | undefined |
This project was generated with Angular CLI version 8.3.14.
Run the command to start the build every time a file change:
npm run build:watch
Run the command to create a local symlink and start a local dev server fo app dev/testing.
npm run ionic:serve
npm link: Create a local symlink that can then be used in the project where you want to integrate the package as you don’t want to build, publish and update a library all the time while testing.npm link ngx-ionic-image-viewer inside the projects folder to link the global installation target into your project’s node_modules folder.ionic serve: Start a local dev server for app dev/testing. Navigate to http://localhost:8100/. The app will automatically reload if you change any of the source files.Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Check
package.jsonfor lifecycle events
Run npm release to create a new release with standard-version. This bumps the version of projects/ngx-ionic-image-viewer/package.json, uses conventional-changelog to update CHANGELOG.md, commits package.json and CHANGELOG.md and tags a new release.
Check
package.jsonand.versionrcfor lifecycle events
After building your library with ng build ngx-ionic-image-viewer, go to the dist folder cd dist/ngx-ionic-image-viewer and run npm publish.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Run npx git-cz to generate a valid commit message. It’s easy to forget about the commit convention so to be consistent use commitizen to generate our commits and husky to manage a Git commit-msg hook to validate the commit message.
Further information: How to automate versioning and publication of an npm package
Simon Golms
npx simongolmsContributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2019 Simon Golms.
This project is MIT licensed.
FAQs
An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
The npm package ngx-ionic-image-viewer receives a total of 696 weekly downloads. As such, ngx-ionic-image-viewer popularity was classified as not popular.
We found that ngx-ionic-image-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.