ngx-awesome-gallery

NgxAwesomeGallery

A simple ,lightweight ,Easy to integrate image gallery in Angular.

#Tested in Angular 7.

Online Demo

http://abdulkhaderp.github.io/awsomeGalleryDemo/index.html

Installation

npm i ngx-awesome-gallery

Usage

• Import NgxAwesomeGalleryModule in app.module.ts, Add it in imports array :

  import {NgxAwesomeGalleryModule} from 'ngx-awesome-gallery';
  ..
  imports: [
     .. , NgxAwesomeGalleryModule
  ]
  

• Use the library in the component html :

       <div class="your_container_class">
           <lib-NgxAwesomeGallery [source]=imageData [conf]=conf></lib-NgxAwesomeGallery>
       </div>
  

• Define width and height with CSS class, "your_container_class". The gallery will take 100% height and width of the DIV wrapper.

• Provide required data (source and conf) in component .ts file. Source is madatory, conf is optional.

    imageData = [{
   link:"../assets/images/first.jpg", //Path to image file.
   description:"Sample description 1"  //Optional description text. 
         },..]
  
  
  
  conf = {
     "transitionStyle":"scale", 
     "description" : true,  
     "fullWidth" : false
  

  }

conf properties in detail:

##transitionStyle

• Define the image transition css effect.
• Default: 'active'
• Available Options: scale, swing , tilt

##description

• Decide show/hide the optional description text.

• Default: false

• Expected: true or false

##fullWidth

• If set true, the image will take 100% width of the wrapper DIV. Else, image will be kept as of it's original width.

• Default: false

• Expected: true or false