angular-magnific-popup
v0.0.8
Published
Angular Image Gallery Library
Downloads
5
Readme
AngularMagnificPopup
Angular Image Gallery Library
npm i jquery @types/jquery magnific-popup angular-magnific-popup
- in angular.json under styles and scripts add:
"styles": [
"node_modules/magnific-popup/dist/magnific-popup.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/magnific-popup/dist/jquery.magnific-popup.min.js"
]
In the angular module,
import { MagnificPopup } from 'angular-magnific-popup'
and add"MagnificPopup"
to the imports array;Example usage in the html file:
<div magnificPopup>
<a href="https://picsum.photos/200">
<img src="https://picsum.photos/200" />
</a>
<a href="https://picsum.photos/300">
<img src="https://picsum.photos/300" />
</a>
<a href="https://picsum.photos/400">
<img src="https://picsum.photos/400" />
</a>
</div>
DEMO: https://angular-libs-showcase.web.app/magnific-popup