Question

0

58

Vistas

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

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 scroll down to the 5th large image directly 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 class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="item" id="First"><img src="/first.jpg" /></div>
        <div class="item" id="Second"><img src="/second.jpg" /></div>
        <div class="item" id="Third"><img src="/third.jpg" /></div>
        <div class="item" id="Fourth"><img src="/fourth.jpg" /></div>
        <div class="item" id="Fifth"><img src="/fifth.jpg" /></div>
      </div>
    </div>
  </div>
</div>

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

Thank you

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T18:13:43.096Z

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/bootstrap@5.0.2/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 class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="item"><img id="image" src="" /></div>
      </div>
    </div>
  </div>
</div>

<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 · 2022-07-03T18:13:43.176Z

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/bootstrap@5.1.3/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" class="thumb" />

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

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="item"><img id="modalImage" class="img-fluid" /></div>
      </div>
    </div>
  </div>
</div>

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