Uso o angular-bootstrap-lightbox, que serve para mostrar imagens ampliadas, ao clicar sobre elas.
Coloquei as imagens em páginas diferentes, usando o ng-repeat
e o filtro personalizado| filterBy: ['id']: ''"
, só que apenas a imagem do primeiro objeto na lista do Array é ampliada corretamente, os demais eu preciso ir acrescentando +1, +2, +3 e sucessivamente. O terceiro objeto no Array só amplia a imagem corretamente se eu acrescentar ($index+2), Ex:
$scope.Images =
[
{ id="1", url: "/images/img-1.jpg", src: "/images/img-1.jpg"
},
{ id="2", url: "/images/img-2.jpg", src: "/images/img-2.jpg"
},
{ id="3", url: "/images/img-3.jpg", src: "/images/img-3.jpg"
}
];
O objeto que é o primeiro na lista do Array $scope.images
funciona normalmente
<div ng-controller="QuadrinhosCtrl">
<div ng-repeat="image in images | filterBy: ['id']: '1'">
<a ng-click="openLightboxModal($index)" title="Ampliar Imagem">
<img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
</a>
</div>
</div>
O objeto que é o segundo na lista do Array $scope.images
só funciona se eu acrescentar +1 no $index
<div ng-controller="QuadrinhosCtrl">
<div ng-repeat="image in images | filterBy: ['id']: '2'">
<a ng-click="openLightboxModal($index+1)" title="Ampliar Imagem">
<img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
</a>
</div>
</div>
O objeto que é o terceiro na lista do Array $scope.images
só funciona se eu acrescentar +2 no $index
<div ng-controller="QuadrinhosCtrl">
<div ng-repeat="image in images | filterBy: ['id']: '3'">
<a ng-click="openLightboxModal($index+2)" title="Ampliar Imagem">
<img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
</a>
</div>
</div>
A chamada padrão para a diretiva, que é inserida no controller:
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
Tentei algumas formas mais não obtive exito, como solucionar esse problema?