Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
ng5-gallery
Advanced tools
Angular image gallery simplifies the process of creating beautiful image gallery for the web and mobile devices.
Install it with npm
npm install --save ng-gallery
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map
needs to tell the System loader where to look for ng-gallery
:
map: {
'ng-gallery': 'node_modules/ng-gallery/bundles/ng-gallery.umd.js',
}
Here is a live plunkr
Import GalleryModule
and set the gallery configuration in your root module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GalleryModule } from 'ng-gallery';
export const galleryConfig : GalleryConfig = {
// ...
}
@NgModule({
imports: [
// ...
BrowserAnimationsModule,
GalleryModule.forRoot(galleryConfig)
]
})
After that you will be able to use Gallery's components and there is two options:
<gallery></gallery>
: to insert the gallery right in the template, see basic example<gallery-modal></gallery-modal>
: to open the gallery in a modal, see modal exampleOne final step is to fill the gallery with images and there is two options:
constructor(private gallery: GalleryService) { }
ngOnInit() {
this.gallery.load(images);
}
[gallerize]
directive<div [gallerize] class="content">
<img src="assets/img/img3.jpg" alt="Spring">
<img src="assets/img/img4.jpg" alt="Fire">
<img src="assets/img/img5.jpg" alt="Peacock">
</div>
Gallery Module relies on HammerJS for gestures, make sure it is loaded into the application.
You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.
To install via npm, use the following command:
$ npm install --save hammer.js
After installing, import it on your app's root module
import 'hammerjs';
If you identify any errors in this module, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!
FAQs
Angular Image Gallery
We found that ng5-gallery 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.