The SharePoint framework (SPFx) is a recently revealed technology by Microsoft which that works as client-side model and supports open source tools. It is mostly recommended for SharePoint online.
Galleries are used to display the images/photos in thumbnail grid or layouts or a carousel which can be scrolled through to view image one at a time.
Since, we are developers, we could create e-commerce web application like Amazon, Flipkart. These types of applications mainly play with images/photos. So, we need to concentrate on displaying multiple images and displays in one layout.
I have been assigned the same kind of project and seek solution, and then I found ngx-gallery readymade angular component to attain the same.
Feature of this component:
1. Image preview
2. Full screen image
3. Image scrolling
4. Previous and next arrows
Let me take you through step by step procedure with sample codes.
Step 1:
we need to install font-awesome. Use below command to install it.
npm install font-awesome –save
Note: This tool uses some icons like forward arrow and backward arrow. The icons are referred from font-awesome.
Step 2:
Now we are going to install ngx-gallery in your project using below command
npm install ngx-gallery –save
Step 3:
Register ngx-gallery in app module on providers array
import { NgxGalleryModule } from ‘ngx-gallery’;
…
@NgModule({
imports: [
…
…
],
providers:[NgxGalleryModule ]
…
})
export class AppModule { }
Step 4:
Import in your component, here I am using in App.component
// app.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from ‘ngx-gallery’;
…
@Component({
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’],
})
Here I use two arrays, one for look and feel and the other one for image source.
Source array has three key-value pair to show and three different size of images. Also, you can use one image instead of three and it will resize automatically.
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’
}
];
}
}
Step 5:
Use the ngx-gallery component in your html
// app.component.html
<ngx-gallery [options]=”galleryOptions” [images]=”galleryImages”></ngx-gallery>
I hope this article helps you. Comment below, if you have queries regarding this article.