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.
ngx-gallery-15
Advanced tools
Angular image gallery plugin Based on [NgxGallery](https://github.com/lukasz-galka/ngx-gallery), Compatible with Angular 17+
Angular image gallery plugin Based on NgxGallery, Compatible with Angular 17+
npm install font-awesome --save
For angular-cli based projects insert styles into .angular-cli.json
"styles": [
...
"../node_modules/font-awesome/css/font-awesome.css"
]
npm install hammerjs --save
import 'hammerjs';
If you are not using SystemJS you can skip this section.
map: {
'ngx-gallery-15': 'node_modules/ngx-gallery-15/bundles/ngx-gallery-15.umd.js',
}
If you are not using Angular Material you can skip this section.
Angular Material is using transform: translate3d(0,0,0);
in components styles. Unfortunately transform
changes positioning context and preview won't work properly. To avoid this situation you have to override material styles, for example:
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; // your theme
.mat-sidenav-container, .mat-sidenav-content, .mat-tab-body-content {
transform: none !important;
}
You can read more about this issue here
npm install ngx-gallery-15 --save
width
| Type: string
| Default value: '500px'
- gallery width
height
| Type: string
| Default value: '400px'
- gallery height
breakpoint
| Type: number
| Default value: undefined
- responsive breakpoint, works like media query max-width
fullWidth
| Type: boolean
| Default value: false
- sets the same width as browser
layout
| Type: string
| Default value: NgxGalleryLayout.Bottom
- sets thumbnails position
startIndex
| Type: number
| Default value: 0
- sets index of selected image on start
linkTarget
| Type: string
| Default value: _blank
- sets target attribute of link
lazyLoading
| Type: boolean
| Default value: true
- enables/disables lazy loading for images
image
| Type: boolean
| Default value: true
- enables or disables image
imageDescription
| Type: boolean
| Default value: true
- enables or disables description for images
imagePercent
| Type: number
| Default value: 75
- percentage height
imageArrows
| Type: boolean
| Default value: true
- enables or disables arrows
imageArrowsAutoHide
| Type: boolean
| Default value: false
- enables or disables arrows auto hide
imageSwipe
| Type: boolean
| Default value: false
- enables or disables swipe
imageAnimation
| Type: string
| Default value: NgxGalleryAnimation.Fade
- animation type
imageSize
| Type: string
| Default value: NgxGalleryImageSize.Cover
- image size
imageAutoPlay
| Type: boolean
| Default value false
- enables or disables auto play
imageAutoPlayInterval
| Type: number
| Default value: 2000
- interval for auto play (ms)
imageAutoPlayPauseOnHover
| Type: boolean
| Default value: false
- enables or disables pouse auto play on hover
imageInfinityMove
| Type: boolean
| Default value: false
- enables or disables infinity move by arrows
imageActions
| Type: NgxGalleryAction[]
| Default value: []
- Array of custom actions
imageBullets
| Type: boolean
| Default value: false
- enables or disables navigation bullets
thumbnails
| Type: boolean
| Default value: true
- enables or disables thumbnails
thumbnailsColumns
| Type: number
| Default value: 4
- columns count
thumbnailsRows
| Type: number
| Default value: 1
- rows count
thumbnailsPercent
| Type: number
| Default value: 25
- percentage height
thumbnailsMargin
| Type: number
| Default value: 10
- margin between thumbnails and image
thumbnailsArrows
| Type: boolean
| Default value: true
- enables or disables arrows
thumbnailsArrowsAutoHide
| boolean: string
| Default value: false
- enables or disables arrows auto hide
thumbnailsSwipe
| Type: boolean
| Default value: false
- enables or disables swipe
thumbnailsMoveSize
| Type: number
| Default value: 1
- number of items to move on arrow click
thumbnailsOrder
| Type: number
| Default value: NgxGalleryOrder.Column
- images order
thumbnailsRemainingCount
| Type: boolean
| Default value: false
- if true arrows are disabled and last item has label with remaining count
thumbnailsAsLinks
| Type: boolean
| Default value: false
- enables or disables links on thumbnails
thumbnailsAutoHide
| Type: boolean
| Default value: false
- hides thumbnails if there is only one image
thumbnailMargin
| Type: number
| Default value: 10
- margin between images in thumbnails
thumbnailSize
| Type: string
| Default value: NgxGalleryImageSize.Cover
- thumbnail size
thumbnailActions
| Type: NgxGalleryAction[]
| Default value: []
- Array of custom actions
preview
| Type: boolean
| Default value: true
- enables or disables preview
previewDescription
| Type: boolean
| Default value: true
- enables or disables description for images
previewArrows
| Type: boolean
| Default value: true
- enables or disables arrows
previewArrowsAutoHide
| boolean: string
| Default value: false
- enables or disables arrows auto hide
previewSwipe
| Type: boolean
| Default value: false
- enables or disables swipe
previewFullscreen
| Type: boolean
| Default value: false
- enables or disables fullscreen icon
previewForceFullscreen
| Type: boolean
| Default value: false
- enables or disables opening preview in fullscreen mode
previewCloseOnClick
| Type: boolean
| Default value: false
- enables or disables closing preview by click
previewCloseOnEsc
| Type: boolean
| Default value: false
- enables or disables closing preview by esc keyboard
previewKeyboardNavigation
| Type: boolean
| Default value: false
- enables or disables navigation by keyboard
previewAnimation
| Type: boolean
| Default value: true
- enables or disables image loading animation
previewAutoPlay
| Type: boolean
| Default value false
- enables or disables auto play
previewAutoPlayInterval
| Type: number
| Default value: 2000
- interval for auto play (ms)
previewAutoPlayPauseOnHover
| Type: boolean
| Default value: false
- enables or disables pouse auto play on hover
previewInfinityMove
| Type: boolean
| Default value: false
- enables or disables infinity move by arrows
previewZoom
| Type: boolean
| Default value: false
- enables or disables zoom in and zoom out
previewZoomStep
| Type: number
| Default value: 0.1
- step for zoom change
previewZoomMax
| Type: number
| Default value: 2
- max value for zoom
previewZoomMin
| Type: number
| Default value: 0.5
- min value for zoom
previewRotate
| Type: boolean
| Default value: false
- enables or disables rotate buttons
previewDownload
| Type: boolean
| Default value: false
- enables or disables downoad button
previewBullets
| Type: boolean
| Default value: false
- enables or disables navigation bullets
arrowPrevIcon
| Type: string
| Default value: 'fa fa-arrow-circle-left'
- icon for prev arrow
arrowNextIcon
| Type: string
| Default value: 'fa fa-arrow-circle-right'
- icon for next arrow
closeIcon
| Type: string
| Default value: 'fa fa-times-circle'
- icon for close button
fullscreenIcon
| Type: string
| Default value: 'fa fa-arrows-alt'
- icon for fullscreen button
spinnerIcon
| Type: string
| Default value: 'fa fa-spinner fa-pulse fa-3x fa-fw'
- icon for spinner
zoomInIcon
| Type: string
| Default value: 'fa fa-search-plus'
- icon for zoom in
zoomOutIcon
| Type: string
| Default value: 'fa fa-search-minus'
- icon for zoom out
rotateLeftIcon
| Type: string
| Default value: 'fa fa-undo'
- icon for rotate left
rotateRightIcon
| Type: string
| Default value: 'fa fa-repeat'
- icon for rotate right
downloadIcon
| Type: string
| Default value: 'fa fa-arrow-circle-down'
- icon for download
actions
| Type: NgxGalleryAction[]
| Default value: []
- Array of new custom actions that will be added to the left of the current close/zoom/fullscreen icons
small
| Type: string | SafeResourceUrl
- url used in thumbnailsmedium
| Type: string | SafeResourceUrl
- url used in imagebig
| Type: string | SafeResourceUrl
- url used in previewdescription
| Type: string
- description used in previewurl
| Type: string
- url used in linklabel
| Type: string
- label used for aria-label when thumbnail is a linkFade
(default)Slide
Rotate
Zoom
Cover
(default)Contain
Top
Bottom
(default)Column
(default)Row
Page
Examples for
icon
| Type: string
- icon for custom actiondisabled
| Type: boolean
| Default value: false
- if the icon should be disabledtitleText
| Type: string
| Default value: ''
- text to set the title attribute toonClick
| Type: (event: Event, index: number) => void
- Output function to call when custom action icon is clickedchange
- triggered on image changeimagesReady
- triggered when images length > 0previewOpen
- triggered on preview openpreviewClose
- triggered on preview closepreviewChange
- triggered on preview image changeshow(index: number): void
- shows image at indexshowNext(): void
- shows next imageshowPrev(): void
- shows prev imagecanShowNext(): boolean
- returns true if there is next imagecanShowPrev(): boolean
- returns true if there is prev imageopenPreview(index: number): void
- opens preview at indexmoveThumbnailsLeft(): void
- moves thumbnails to leftmoveThumbnailsRight(): void
- moves thumbnails to rightcanMoveThumbnailsLeft(): boolean
- returns true if you can move thumbnails to leftcanMoveThumbnailsRight(): boolean
- returns true if you can move thumbnails to right// app.module.ts
import { NgxGalleryModule } from 'ngx-gallery-15';
...
@NgModule({
imports: [
...
NgxGalleryModule
...
],
...
})
export class AppModule { }
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery-15';
...
@Component({
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
ngOnInit(): void {
this.galleryOptions = [
{
width: '600px',
height: '400px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
// max-width 800
{
breakpoint: 800,
width: '100%',
height: '600px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
this.galleryImages = [
{
small: 'assets/1-small.jpg',
medium: 'assets/1-medium.jpg',
big: 'assets/1-big.jpg'
},
{
small: 'assets/2-small.jpg',
medium: 'assets/2-medium.jpg',
big: 'assets/2-big.jpg'
},
{
small: 'assets/3-small.jpg',
medium: 'assets/3-medium.jpg',
big: 'assets/3-big.jpg'
}
];
}
}
// app.component.html
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
.ngx-gallery-thumbnail.ngx-gallery-active {
/* your styles */
}
ngx-gallery ::ng-deep .ngx-gallery-arrow {
/* your styles */
}
ngx-gallery ::ng-deep ngx-gallery-image .ngx-gallery-arrow {
/* your styles */
}
ngx-gallery ::ng-deep ngx-gallery-thumbnails .ngx-gallery-arrow {
/* your styles */
}
ngx-gallery ::ng-deep ngx-gallery-preview .ngx-gallery-arrow {
/* your styles */
}
FAQs
Angular image gallery plugin Based on [NgxGallery](https://github.com/lukasz-galka/ngx-gallery), Compatible with Angular 17+
The npm package ngx-gallery-15 receives a total of 132 weekly downloads. As such, ngx-gallery-15 popularity was classified as not popular.
We found that ngx-gallery-15 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.