Today, We want to share with you angularjs image gallery.In this post we will show you ngx-image-gallery example, hear for ngx-gallery we will give you demo and example for implement.In this post, we will learn about Angularjs Photo Gallery with an example.

Easy Angular Image Gallery

Angular-modal-gallery is an Angular library to create image galleries of clickable thumbnails. A feature-rich, touch-enabled image gallery component for Angular.

Advantages for Angularjs Image Gallery

• isolated precise parts (modular, board and picture)
• numerous setup alternatives
• full responsive (under settling)
• wide and fit picture show mode
• numerous picture sizes/thumbnail (for board) , medium (for picture), unique (for modular)
• 3 worked in topics
• 9 picture moves (CSS3 3D)
• configurable console easy routes in modular window (keyCodes)
• touch bolster

Added External Libs

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

//JS

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
https://code.jquery.com/jquery-2.2.4.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

HTML Code

Step 1: index.html

        

  

    


      
      

        

          ×
          
TamilRokers
        
        

          

            
{{profileController.images[profileController.current].caption}}
          
          

            
          
        
        

          Close
        
      

    
  
  
  

    
{{profileController.header}}
  

  

    

      
      Add Profiles
    
  

  

    

      
{{profileController.caption}}
      

        
          
          {{image.caption}}
        
      
    
  

Angularjs code

Step 2: main.js

var images = [{
    "src":"https://www.pakainfo.com/wp-content/uploads/2020/05/Responsive-Bootstrap-4-testimonial-slider-example.png",
    "caption": "stuck meaning in hindi"
  },
    { 
      "src":"https://www.pakainfo.com/wp-content/uploads/2020/06/bootstrap-testimonial-slider-snippet1.jpg",
      "caption": "purpose meaning in hindi"
    },
    { 
      "src":"https://www.pakainfo.com/wp-content/uploads/2020/06/bootstrap-testimonial-slider.jpg",
      "caption":"weird meaning in hindi"
    },
    {
       "src": "https://www.pakainfo.com/wp-content/uploads/2020/05/bootstrap-carousel-slider-with-thumbnails.png",
        "caption":"could meaning in hindi"
    },
     {
       "src": "https://www.pakainfo.com/wp-content/uploads/2020/05/product-slider-bootstrap.png",
       "caption":"urban meaning in hindi"
     }, 
     {
       "src": "",
       "caption":"whether meaning in hindi"
     }
   ];
angular.module('pakainfoApplication', [])
  .controller('productController', function() {
  this.showCaption = true;
  this.header = "Profile Gallery";
  this.images = images;
  this.current = 0;
  this.addImage = function() {
      var image = {"src":this.imageSrc};
      this.images.push(image);
      this.imageSrc ="";
  }
  
  this.getIndex = function(img) {
    this.current = this.images.indexOf(img);
    
  }
   this.nextImage = function() {
     this.current += 1; 
     if (this.current===this.images.length)
       this.current = 0;
   }
});

Style code

Step 3: style.css

.thumb {
  position: relative;
  
  height: 220px;
  overflow: hidden;
}
#add-image {
  margin-top:10px;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.modal-body {
  text-align: center;
  vertical-align: middle;
}
.img-modal {
   display: flex;
   align-items: center;
   justify-content: center;
}

.thumbnail:hover span.text-content {
  opacity: 1;
}

How to Build Angularjs Image Gallery?

• npm install
• typings install
• gulp dev
• gulp prod(minified css file and javascript )

I hope you get an idea about Photo Gallery with AngularJS and CSS3.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.