Obtaining images from JSON data and displaying them in a modal using AngularJS

Question

Obtaining images from JSON data and displaying them in a modal using AngularJS

Utilizing AngularJS to retrieve a JSON file:

{
 "albumId": 1,
 "id": 1,
 "title": "accusamus beatae ad facilis cum similique qui sunt",
 "url": "http://placehold.it/600/92c952",
 "thumbnailUrl": "http://placehold.it/150/92c952"
},

and showcasing it with ng-repeat:

<div ng-repeat="image in images" class="col-xs-2 ">
   <div class="thumbnail">
      <img src="{{ image.thumbnailUrl }}" alt="" ng-click="open()" />

   </div>
</div>

Everything is functioning smoothly. Next, I integrated ui.bootstrap to connect the thumbnails and trigger a modal window opening.

controller:

    app.controller("page3Ctrl",['$scope', '$resource', '$uibModal', function ($scope, $resource,$uibModal) {

    var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', {});
    $scope.images = postingsResource.query();


    $scope.open = function() {
        var uibModalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'modal.html'

        });
    };

}]);

Everything is working well. Now, the question arises - how can I dynamically display the corresponding image from thumbnailUrl in the modal URL? They need to match up.

javascript angularjs

Answer 1

Answer №1

If you're not utilizing a controller for the modal feature, you can simply set $scope as the scope for the modal and assign the selected image to a scope variable to access it in the modal template.

var app = angular.module('app', ['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="{{currentImage.url}}"/></div>');
});
app.controller("page3Ctrl", ['$scope', '$resource', '$uibModal', function($scope, $resource, $uibModal) {

  var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', {});
  $scope.images = postingsResource.query();

 //no controller for modal
  $scope.open = function(image) {
    $scope.currentImage = image;
    var uibModalInstance = $uibModal.open({
      animation: true,
      scope:$scope,
      templateUrl: 'modal.html'
    });
  };
  
  /*
  //modal has controller
  $scope.open = function(image) {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'modal.html',
      resolve: {
        image: function(){
          return image;
        }
      },
      controller: function($scope, image){
        $scope.currentImage = image;
      }
    });
  };
  */

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.11/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="page3Ctrl">
  <div ng-repeat="image in images.slice(0,10)" class="col-xs-2 ">
    <div class="thumbnail" ng-click="open(image)">
      <img ng-src="{{ image.thumbnailUrl }}" alt="" ng-click="open()" />

    </div>
  </div>
</div>

Answer 2

If you're not utilizing a controller for the modal feature, you can simply set $scope as the scope for the modal and assign the selected image to a scope variable to access it in the modal template.

var app = angular.module('app', ['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="{{currentImage.url}}"/></div>');
});
app.controller("page3Ctrl", ['$scope', '$resource', '$uibModal', function($scope, $resource, $uibModal) {

  var postingsResource = $resource('http://jsonplaceholder.typicode.com/photos', {});
  $scope.images = postingsResource.query();

 //no controller for modal
  $scope.open = function(image) {
    $scope.currentImage = image;
    var uibModalInstance = $uibModal.open({
      animation: true,
      scope:$scope,
      templateUrl: 'modal.html'
    });
  };
  
  /*
  //modal has controller
  $scope.open = function(image) {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: 'modal.html',
      resolve: {
        image: function(){
          return image;
        }
      },
      controller: function($scope, image){
        $scope.currentImage = image;
      }
    });
  };
  */

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.11/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="page3Ctrl">
  <div ng-repeat="image in images.slice(0,10)" class="col-xs-2 ">
    <div class="thumbnail" ng-click="open(image)">
      <img ng-src="{{ image.thumbnailUrl }}" alt="" ng-click="open()" />

    </div>
  </div>
</div>

Answer 3

Answer №2

To enhance the open function, consider including an argument that takes in the image's URL. Here's how you can do it:

$scope.open = function(imageUrl) {
    var uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        resolve: {
           imageUrl: function () {
             return imageUrl;
           }
        }
    });
}

Now, implement this in your HTML by passing the image URL when clicking on the thumbnail:

<img src="{{ image.thumbnailUrl }}" alt="" ng-click="open(image.url)" />

Remember to pass this parameter to the modal controller as well:

var ModalInstanceCtrl = function ($scope, $modalInstance, imageUrl) {
    $scope.imageUrl = imageUrl;
};

For more information on passing values to a modal controller, check out this resource: Pass parameter to modal

Answer 4

To enhance the open function, consider including an argument that takes in the image's URL. Here's how you can do it:

$scope.open = function(imageUrl) {
    var uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        resolve: {
           imageUrl: function () {
             return imageUrl;
           }
        }
    });
}

Now, implement this in your HTML by passing the image URL when clicking on the thumbnail:

<img src="{{ image.thumbnailUrl }}" alt="" ng-click="open(image.url)" />

Remember to pass this parameter to the modal controller as well:

var ModalInstanceCtrl = function ($scope, $modalInstance, imageUrl) {
    $scope.imageUrl = imageUrl;
};

For more information on passing values to a modal controller, check out this resource: Pass parameter to modal

Obtaining images from JSON data and displaying them in a modal using AngularJS

Answer №1

Answer №2

Similar questions

The execution of Node.js on data is triggered only after the content has been successfully written

How to Retrieve the Number of Requests in an Express Application

Angular and Bootstrap 5 combine to create a dynamic multi-item carousel featuring animated slide transitions and embedded YouTube videos

Next.js encountered a Runtime Error: Trying to access properties of undefined (specifically 'status') and failing

Ensure that confirmation is only prompted in ASP.NET when necessary

Frequently refreshing a page to display the most recent information without needing to reload the entire

(React) Error: Unable to access property 'this' as it is set to undefined while trying to utilize refs

How to handle redirects based on status codes in AngularJS $http requests

Increasing the date field value in Mongoose, ExpressJS, and AngularJS with additional days

How can you utilize data captured through a JavaScript onchange event in conjunction with another event?

Transfer the script from package.json to an npm package

"Is there a way to retrieve "Lorem ipsum" information from a web service in JSON format

Error: The $injector:modulerr error is occurring on the server, even though it works fine locally

Error Alert: Vue is not recognized in Browserify environment

Displaying a table in Chrome/Firefox with a mouseover feature

Retrieve Static Property Values Using jQuery/JavaScript in Backend Code

The MUI makeStyles() class has been implemented, yet the styles are not being displayed when using classList.add('class-name')

A guide to incorporating border radius to images within a composite image with sharp.js in Node.js

I encounter Error 406 and CORS issues when making API calls

Is there a way to showcase all the information in products while also organizing it in the same manner that I have?