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 · Accepted Answer · 2016-01-19 03:39:06Z

0

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>

edited Jan 19, 2016 at 3:39

answered Jan 19, 2016 at 3:31

thinkling

592 bronze badges

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

5 Comments

C. L. Over a year ago

I was able to retrieve information from the JSON file as- Images: Array[4] 0: Object thumbnail: "images/bird-thumb.jpg", image: "images/bird.jpg", msg: "Bird fly." 1: Object 2: Object However, the thumbnail images still do not get loaded

thinkling Over a year ago

remove this line: $scope.images = [];

C. L. Over a year ago

Thanks for the suggestion. Even after remove $scope.images= []; the thumbnails still do not get loaded. This is what in the source code- <div class="gallery" ng-repeat="img in images"> <img class="thumb" alt title ng-click="showImage(img)" /> </div> And the div only occur once...

C. L. Over a year ago

After removing the { images: .... } layer from the JSON file, the thumbnails got loaded successfully. Thanks @thinkling.

C. L. Over a year ago

After minor adjustments, I was able to run the showImage function by click on a thumbnail. Thanks for your help!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related