Dynamicaly changing images with Bootstrap 5 and AngularJS

Question

I created the following array that contains images with angularJS:

   $scope.docImg = [
      '../../Content/Image/BackGrounds/abra.png',
        '../../Content/Image/BackGrounds/background_black.jpg',
            '../../Content/Image/BackGrounds/halloween.jpg',
            '../../Content/Image/BackGrounds/registration.jpg',
   ]

I displayed them by using ng-repeat and Bootstrap 5

    <div class="@colmode mh-100 mt-4" ng-show="docImg.length>0">
    <div class="card bg-dark h-100 border-eniac">
        <div class="card-header bg-eniac d-flex justify-content-between">
            <a href="#attachments" class="text-light fw-bold" data-bs-toggle="tooltip"  tooltip title="See all images">@Global.Images</a>
            <i class="fas fa-file"></i>
        </div>
        <div class="card-body container">
            
            <div class="row col-12">
            <div ng-repeat="a in docImg" class="col-4">
                

                <div id="{{a.Id}}" class="img-container">
                    <img ng-src="{{a}}" class="img-fluid"  data-bs-toggle="modal" data-bs-target="#docImgModal"/>
                </div>


                         </div>
                                 </div>
               
                            </div>
                        </div>
                    </div>

These are small images, but I want to display them in large size too and I thought I am going to use Modals for this purpose.

So I want to create a bootstrap modal that displays the clicked and only the clicked image, and this is where I got stuck: I can display the images if I put the modal in the loop, but then obviously it displays all the images at the same time, which I don't want.

Modal that doesn't work well:

<div class="modal fade" id="docImgModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
             <img ng-src="{{a}}">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
        

What I want to do: Create a Modal or a function that takes and displays only the image that I clicked on. Maybe using a dynamically changing id, but I am open to other ideas too.

The images in the loop:

The issue: ( It displays all the images from the loop )

PS.: The reason I am using AngularJS - This is an older project, so I have no choice.

If my question is not understandable please ask, or tell me how could I explain it better. I am always open to constructive critics.

Answer 1

I added the features you needed, you may change it to make it more suitable!

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.docImg = [
      'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/airplaneF16.png',
      'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/barbara_color.png',
      'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/chelsea.png',
      'https://docs.juliahub.com/TestImages/cMlD2/1.6.1/thumbnails/coffee.png',
    ]
});
const exampleModal = document.getElementById('docImgModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  const imgElement = event.relatedTarget
  const imgSrc = imgElement.getAttribute('src')
  const modalImgElement = exampleModal.querySelector('#modal-img')
  modalImgElement.src = imgSrc
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="@colmode mh-100 mt-4" ng-show="docImg.length>0">
    <div class="card bg-dark h-100 border-eniac">
      <div class="card-header bg-eniac d-flex justify-content-between">
        <a href="#attachments" class="text-light fw-bold" data-bs-toggle="tooltip"  tooltip title="See all images">@Global.Images</a>
        <i class="fas fa-file"></i>
      </div>
      <div class="card-body container">
        <div class="row col-12">
          <div ng-repeat="a in docImg" class="col-4">
            <div id="{{a.Id}}" class="img-container">
              <img ng-src="{{a}}" class="img-fluid"  data-bs-toggle="modal" data-bs-target="#docImgModal"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="docImgModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
               <img id="modal-img" src="">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Answer 2

You should probably dynamic change the src of the image inside the modal.

With something similar to this:

$('#modal').on('show.bs.modal', function (e) {
   // the clicked element is available as the relatedTarget property of the event
   var src = $(e.relatedTarget).attr('src');
   $(this).find('.modal-body > img').attr('src', src);
});

this is JQuery btw, found at another post

Or you could use some lightbox library like fslightbox. I would use a library because, besides the dynamic changing, it handles a lot more features such as full screen, gallery if needed, and more.

Answer 3

Your idea of using dynamically changing id is already correct.

Here, I only copy pasted your code, put your modal inside your loop, add dynamic index to the id and data-bs-target of docImgModal.

And it works!

<div class="@colmode mh-100 mt-4" ng-show="docImg.length>0">
  <div class="card bg-dark h-100 border-eniac">
    <div class="card-header bg-eniac d-flex justify-content-between">
      <a href="#attachments" class="text-light fw-bold" data-bs-toggle="tooltip"  tooltip title="See all images">@Global.Images</a>
      <i class="fas fa-file"></i>
    </div>
    <div class="card-body container">
          
      <div class="row col-12">
        <div ng-repeat="(idx, a) in docImg" class="col-4">
          <div id="img{{idx}}" class="img-container">
            <img ng-src="{{a}}" class="img-fluid h-50" data-bs-toggle="modal" data-bs-target="#docImgModal{{idx}}"/>
          </div>

          <div class="modal fade" id="docImgModal{{idx}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   <img ng-src="{{a}}">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>