How can I update image source in a Bootstrap 5 modal based on the trigger element?-CodePudding

I made an image gallery. And when I click an image, a large image is shown in modal.

If there are 5 images and when you click 5th image, I would like to show the 5th large image in the modal. Is it possible to make it?

<!-- Button trigger modal -->
<a href="#First" data-bs-toggle="modal" data-bs-target="#exampleModal">1st image</a>
<a href="#Second" data-bs-toggle="modal" data-bs-target="#exampleModal">2nd image</a>
<a href="#Third" data-bs-toggle="modal" data-bs-target="#exampleModal">3rd image</a>
<a href="#Fourth" data-bs-toggle="modal" data-bs-target="#exampleModal">4th image</a>
<a href="#Fifth" data-bs-toggle="modal" data-bs-target="#exampleModal">5th image</a>

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <div  id="First"><img src="/first.jpg" /></div>
        <div  id="Second"><img src="/second.jpg" /></div>
        <div  id="Third"><img src="/third.jpg" /></div>
        <div  id="Fourth"><img src="/fourth.jpg" /></div>
        <div  id="Fifth"><img src="/fifth.jpg" /></div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/jandspace/pen/xxPmVem

Thank you

CodePudding user response：

With some slight changes to your code, you can add click handlers to each of the buttons that change the src attribute of the image inside the modal:

['first', 'second', 'third', 'fourth', 'fifth'].forEach(function(key) {
  $('a[href="#'   key   '"]').click(
    function() {
      $('#image').attr('src', '/'   key   '.jpg');
    }
  )
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<a href="#first" data-bs-toggle="modal" data-bs-target="#exampleModal">1st image</a>
<a href="#second" data-bs-toggle="modal" data-bs-target="#exampleModal">2nd image</a>
<a href="#third" data-bs-toggle="modal" data-bs-target="#exampleModal">3rd image</a>
<a href="#fourth" data-bs-toggle="modal" data-bs-target="#exampleModal">4th image</a>
<a href="#fifth" data-bs-toggle="modal" data-bs-target="#exampleModal">5th image</a>

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <div ><img id="image" src="" /></div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

CodePudding user response：

It's often best to react to Bootstrap's modal events. Here I've converted your triggers to image elements. (Anchors really shouldn't be used for actions anyway.) Then we can just get the image source from the trigger image using relatedTarget. Should you need to use anchors a slight adjustment would be needed, but the same concept applies.

Also, we can dramatically simplify your markup by not repeating the elements inside the modal.

Note that I've added the img-fluid class to the modal image to keep it from blowing out the side.

// this could be placed in a script element at the end of the body element

const exampleModalEl = document.getElementById('exampleModal');

exampleModalEl.addEventListener('show.bs.modal', function(event) {
  document.getElementById('modalImage').src = event.relatedTarget.src;
});

.thumb {
  width: 100px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Button trigger modal -->
<img src="https://via.placeholder.com/800" data-bs-toggle="modal" data-bs-target="#exampleModal"  />

<img src="https://via.placeholder.com/800/ff0000" data-bs-toggle="modal" data-bs-target="#exampleModal"  />

<img src="https://via.placeholder.com/800/0000ff" data-bs-toggle="modal" data-bs-target="#exampleModal"  />

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <div ><img id="modalImage"  /></div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>