angular-bootstrap-lightbox "invalid image" with more than four JSON "urls" values

Question

I am trying to make use of angular-bootstrap-lightbox to open a modal after clicking on a thumbnail, and then navigate through that collection of images.

The issue I am having is that only the first 4 sets of images defined in the JSON file are opening the modal and functioning as intended. Anything after that gives me an Invalid image error.

Changing the order of images in the JSON has the previous invalid image working- and then whichever becomes the "last" one gives me the same error. So it's not the actual images. I have also found that adding another image or 2 to one set that's given me that error fixes it, but not always.

I've verified the correct index is being sent to the controller, I have verified that the properties for that particular object index are valid... i am just kind of scratching my head on this, as, like I've said, the first four work! So... just adding another couple of image sets ought not to make a difference, as far as I can tell.

Here's my controller:

app.controller('testCtrl', ['$scope', 'Lightbox', '$http', function($scope, Lightbox, $http) {

  $scope.images = [];
  $scope.images.urls = [];

  $http.get('data/images.json').success(function(data) { 

    for(i=0;i<data.images.length;i++) {
      $scope.images[i] = data.images[i];
    }

  });    

  $scope.openLightboxModal = function (index) {
      Lightbox.openModal($scope.images[index].urls, index);
  };

}]);

JSON:

{
   "images":[
      {
         "urls":[
            "img/DORG_01.jpg",
            "img/DORG_02.jpg",
            "img/DORG_03.jpg",
            "img/DORG_04.jpg"
         ],
         "header":"",
         "headerText":"",
         "caption":"Optional caption",
         "thumbUrl":"img/thumbs/DORG_01.jpg",
         "templateUrl":"partials/template.html"
      },
      {
         "urls":[
            "img/LW_01.jpg",
            "img/LW_02.jpg",
            "img/LW_03.jpg",
            "img/LW_04.jpg",
            "img/LW_05.jpg",
            "img/LW_06.jpg",
            "img/LW_07.jpg"
         ],
         "header":"",
         "headerText":"",
         "caption":"Optional caption",
         "thumbUrl":"img/thumbs/LW_01.jpg",
         "templateUrl":"partials/template.html"
      },
      {
         "urls":[
            "img/WSJ_01.jpg",
            "img/WSJ_02.jpg",
            "img/WSJ_03.jpg",
            "img/WSJ_04.jpg",
            "img/WSJ_05.jpg",
            "img/WSJ_06.jpg"
         ],
         "header":"",
         "headerText":"",
         "caption":"Optional caption",
         "thumbUrl":"img/thumbs/WSJ_01.jpg",
         "templateUrl":"partials/template.html"
      },
      {
         "urls":[
            "img/VW_01.jpg",
            "img/VW_02.jpg",
            "img/VW_03.jpg",
            "img/VW_04.jpg",
            "img/VW_05.jpg",
            "img/VW_06.jpg",
            "img/VW_07.jpg"
         ],
         "header":"",
         "headerText":"",
         "caption":"Optional caption",
         "thumbUrl":"img/thumbs/VW_01.jpg",
         "templateUrl":"partials/template.html"
      },
      {
         "urls":[
            "img/TP_01.jpg",
            "img/TP_02.jpg",
            "img/TP_03.jpg",
            "img/TP_04.jpg"
         ],
         "header":"",
         "headerText":"",
         "caption":"Optional caption",
         "thumbUrl":"img/thumbs/TP_01.jpg",
         "templateUrl":"partials/template.html"
      }
   ]
}

And HTML partial:

<div>
<h2>{{image.header}}</h2>
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">

<p>{{image.headerText}}</p>
<p><a class="btn btn-default" ng-click="openLightboxModal($index)" role="button">View details &raquo;</a>{{$index}}</p>
</div>

Much gratitude to anyone willing to take a look for me.

Ha, I'd spent quite a bit of time searching for an answer before posting this question. It seemed like no one else had had this problem ;) — spm024, Nov 22 '16 at 08:55

score 0 · Answer 1 · answered Dec 04 '16 at 15:43

I had a similar issue. The problem was in index value. If you check the source code of Lightbox.openModal, you'll see it is looking for index inside the array of images:

Lightbox.openModal = function (newImages, newIndex, modalParams) {
  Lightbox.images = newImages;
  Lightbox.setImage(newIndex);
...
Lightbox.setImage = function (newIndex) {
  if (!(newIndex in Lightbox.images)) {
    throw 'Invalid image.';
  }
...

In my case I did not pass the newIndex value, like: Lightbox.openModal(images);

You should check that your $index is valid when it goes inside openModal function.

Daniel, Thank for the reply. I had a similar thought, and tried logging the $index just to make sure. Each one was correct! It seems like it almost HAS to be related to the index somehow. — spm024, Dec 05 '16 at 00:42

angular-bootstrap-lightbox "invalid image" with more than four JSON "urls" values

1 Answers1