I have an image gallery displayed on my page. I need to implement a modal for whenever the user clicks on the images. In the modal I need to show the full size of the selected image. Here is the problem: I have already made the modal work, but when I click on any of the gallery images, the modal shows all of them together in a single modal. I need the modal to only show the one that the user clicked on.
Please note that my webpage is based on AngularJS and PHP. I used ngModal for this modal and that I'm new to using Angular (basically I know nothing, I'm learning), so please be patient with me. Here is my code:
app.js
readApp.controller('newsGallery', function($scope) {
$scope.myData = {
modalShown: false,
}
$scope.logClose = function() {
console.log('close!');
};
$scope.toggleModal = function() {
$scope.myData.modalShown = !$scope.myData.modalShown;
};
});
HTML
<div ng-controller='newsGallery'>
<modal-dialog show='myData.modalShown' width='75%' height='80%' on-close='logClose()'>
<div ng-repeat = "i in idsBlobs" >
<img src="php/visualizar_archivo.php?id={{i.id}}">
</div>
</modal-dialog>
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class = "col-md-4" ng-repeat = "i in idsBlobs" >
<div class="news-image" align="center">
<img src="php/visualizar_archivo.php?id={{i.id}}" class = "img-responsive img-rounded" ng-click='toggleModal();'>
</div>
</div>
</div>
</div>