Click on a image and display it in modal windows

Bootstrap Studio Help
1

Hi,

Would anyone have an example (or a component) where users can click on an image to display it larger in a modal window (with just one button to close it) ?

In the best World, I would like to use always the same modal windows and give the name of the clicked image in paramaters

I know how to do it with JS and others editors, but I can’t find how to do it with BSS…

Thanks all

2

Like this

HTML markup for each image
<img class="img-fluid" src="/smallimage-1.jpg" data-bs-toggle="modal" data-bs-target="#simple-modal" data-bigimage="assets/img/bigimage-1.jpg">

HTML for a simpleModal

<div class="modal fade" role="dialog" tabindex="-1" id="simple-modal">
	<div class="modal-dialog" role="document">
		<div class="modal-content"><button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
			<div class="modal-body"><img class="img-fluid" id="image" src=""></div>
		</div>
	</div>
</div>

CSS for the simplemodal

#simple-modal .modal-dialog {
  max-width: 800px;
  margin: 30px auto;
}

#simple-modal .modal-body {
  position: relative;
  padding: 0px;
  min-height: 400px;
  background: #ccc;
}

#simple-modal .btn-close {
  position: absolute;
  right: -60px;
  top: -24px;
  font-size: 1rem;
  font-weight: normal;
  opacity: 1;
}

#image {
  width: 100%;
}

Javascript

(function (document) {
  "use strict";
  const ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
  };
  ready(() => {
    const img = document.getElementById("image");
    const simpleModal = document.getElementById("simple-modal");
    simpleModal.addEventListener("show.bs.modal", (e) => {
		const bigImage = e.relatedTarget.getAttribute('data-bigimage')
		img.src = bigImage;
    });
  });
})(document);
1 Like
3

There is also a Lightbox component already in BSS that you can use to do this.

4

Thanks for all

Because I’m a new user, it take 2 days to understand how to apply the custom code… But reading the Doc I had learned how to do this.
And it work well.

The ligthbox component is cool for a gallery…