Angular JS Bootstrap UI Modal for Dynamic Images

Question

I tried following this example How to zoom image with angularJS This is getting images from a JSON website and has two different picture links for each {}. I'm trying to enlarge thumbnail images that are obtained from my model by clicking the picture and opening a modal. How do I tie the modal to my click on the image and pass in the image and the caption? Incidentally now when the modal opens, it's empty and it's a tiny width. It would need to be at least 600X600.

"use strict";

var app = angular.module('myApp', ['ngResource','ui.bootstrap']);
app.run(function($templateCache){
  $templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">&times close</a><img ng-src="{{vm.options.imageList.images}}"/></div>');
});

app.controller("MainController", ['$scope','$uibModal','$resource', function($scope,$uibModal,$resource) {
   var vm = this;


  $scope.showModal = function(imageName) {

    $scope.ImageName = "vm.imageList.image" +imageName;
    var uibModalInstance = $uibModal.open({
      animation: true,
      scope:$scope,
      templateUrl: 'modal.html'
    });
    };

vm.selectCategory=selectCategory;

vm.options = {

   imageList:[

  {

    images: 'images/IMG_0321.JPG',
    caption: 'cuddly',
    category: 'lake'
  },
  {

    images: 'images/IMG_0050.JPG',
    caption: 'sleepy',
    category: 'lake'
  },

  {

    images: 'images/IMG_0055.JPG',
    caption:  'sleepy',
    category: 'lake',
  },

   {

    images: 'images/IMG_0056.JPG',
    caption: 'cuddly',
    category: 'lake'
  },

  {

    images: 'images/IMG_0059.JPG',
    caption: 'cuddly',
    category: 'lake'
  }


],
};

function selectCategory(pos) {
  vm.selectedCategory = pos;

};

}]);


HTML
 <div class = "row">
    <div class = "col-md-12">

  <div ng-repeat = "image in vm.options.imageList | filter: {category: vm.selectedCategory}">

  <img  class = "thumbnail"  ng-src="{{image.images}}" hspace ="15" vspace ="10" ng-click="showModal()">

Sajjad Shahi · Accepted Answer · 2018-09-27 08:32:29Z

1

You are not passing the image in your showModal function. This would be the workaround.

<div class = "row">
    <div class = "col-md-12">

       <div ng-repeat = "image in vm.options.imageList | filter: {category: vm.selectedCategory}">
              <img  class="thumbnail"  ng-src="{{image.images}}" hspace ="15" vspace ="10" ng-click="showModal(image.images)">
       </div>
    </div>
</div>

In your modal.html:

$templateCache.put('modal.html', '<div><a ng-click="$close(true)" class="pull-right">&times close</a><img style="max-width:100%; min-height: 600px;" ng-src="{{imageName}}"/></div>');

And the controller:

$scope.showModal = function(imageName) {

var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'modal.html',
  controller: function($scope){
      $scope.imageName = imageName;
  },
  size: 'lg'
});
};

edited Sep 27, 2018 at 8:32

answered Sep 27, 2018 at 8:27

Sajjad Shahi

6025 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ginger22 Over a year ago

Perfect. Thank you!

Ginger22 Over a year ago

Is there a way to also pass in the comment: from the model at the bottom of the image?

Sajjad Shahi Over a year ago

You can pass the whole object actually. I saw your code and I thought the name is enough. you can pass ng-click="showModal(image)" and do whatever you like with it.

Collectives™ on Stack Overflow

Angular JS Bootstrap UI Modal for Dynamic Images

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related