AngularJS Thumbnails from JSON file would not load; how to display large image by clicking on thumbnail

Question

I am using AngularJS to read image data from a JSON file, which works.

Next, I need to load all the thumbnail images to the gallery div and populate the src, alt, and title attributes of the image data I read in using ng-repeat, however it does not work. Thus, no thumbnail is loaded. What happen?

Then, when click on any of the thumbnails, the regular size image should be displayed on the mainImg div. I am not sure the way the code is setup works?

These are my code-

HTML

<!-- regular image display area -->
<div class="mainImg"> <!-- Regular image area  -->
    <img class="large" id="changer" src="images/bird.jpg" />
    <p id="imgMsg">Bird fly.</p>
</div>

<!-- thumbnail area -->
<div class="gallery" ng-repeat="img in images">
     <img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage()" />
</div>

json file


    {
        "images": [
            {
                "thumbnail": "images/bird-thumb.jpg",
                "image": "images/bird.jpg",
                "msg": "Bird fly."
            },{
                "thumbnail": "images/duck-thumb.jpg",
                "image": "images/duck.jpg",
                "msg": "Duck swim."
            },
            {
                "thumbnail": "images/bear-thumb.jpg",
                "image": "images/bear.jpg",
                "msg": "Bear hug."
            },
            {
                "thumbnail": "images/dog-thumb.jpg",
                "image": "images/dog.jpg",
                "msg": "dog bark."
            }
        ]
    }

AngularJS


    var myApp = angular.module('imgApp', []);

    mgApp.controller('imageController', ['$scope', '$http', function ($scope, $http) {
      'use strict';
      $scope.images = [];

      $http.get('data/images.json').success(function (data) {
        $scope.images = data;
        console.log($scope.images);
      });

      $scope.showImage = function () {
        $(".thumb").click(function () {
            //Get that image's altSrc attribute value
            var alt = $(this).attr("alt");
            // Get the alt value for the thumbnail
            var msg = $(this).attr("title");

            //Set the main images src to that value
            $("#changer").attr("src", altSrc);
            // set the main images caption to that value
            $("#imgMsg").text(msg);
        });
    }]);

thinkling thinkling · Accepted Answer · 2016-01-19T03:31:25

you need change your showImage functon and accept an entity, using $modal.open for preview large image, like my code

<!-- thumbnail area -->
<div class="gallery" ng-repeat="img in images">
     <img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage(img)" />
</div>


$scope.showImage = function (img) {
    $modal.open({
        templateUrl: 'templates/image.html',
        size: "sm",
        controller: ['$scope',
            function(scope) {
                scope.entity = img;

            }
        ]
    });
);

image.html

<!-- regular image display area -->
<div class="mainImg"> <!-- Regular image area  -->
    <img class="large" id="changer" ng-src="{{entity.thumbnail}}" />
    <p id="imgMsg">{{ entity.msg }}</p>
</div>

AngularJS Thumbnails from JSON file would not load; how to display large image by clicking on thumbnail

1 Answers