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

Question

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?


1st image
2nd image
3rd image
4th image
5th image

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

Thank you

user_378779 · Answer

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');
    }
  )
});





1st image
2nd image
3rd image
4th image
5th image

user_1264804 · Answer

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;
}

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

2 Answers