Responsive Angularjs Image Gallery

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.

JavaScript Image Thumbnails Preview Gallery
JavaScript Image Thumbnails Preview Gallery

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

<div class="container" ng-app="pakainfoApplication" ng-controller ="productController as profileController">
        
<!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">TamilRokers</h4>
        </div>
        <div class="modal-body">
          <div>
            <p>{{profileController.images[profileController.current].caption}}</p>
          </div>
          <div class="img-modal" ng-click="profileController.nextImage()">
            <img class="img-responsive" ng-src="{{profileController.images[profileController.current].src}}">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
  
  <div class="col-lg-12">
    <h1 class="page-header">{{profileController.header}}</h1>
  </div>

  <div class="container" id="add-image">
    <div class="pull-right">
      <input class="" type="text" placeholder="enter image url" ng-model="profileController.imageSrc" value={{imageSrc}}>
      <button class="btn btn-primary" type="submit" ng-click="profileController.addImage()">Add Profiles</button>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 col-xs-6" ng-repeat="image in profileController.images">
      <h5 class="caption text-center">{{profileController.caption}}</h5>
      <div class="thumb" data-toggle='modal' data-target="#myModal" ng-click="image.">
        <a class="thumbnail" href="" ng-click="profileController.getIndex(image)">
          <img class="img-responsive" ng-src="{{image.src}}" alt="invalid image url">
          <span class="text-content"><span>{{image.caption}}</span></span>
        </a>
      </div>
    </div>
  </div>
</div>

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.