You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.4 KiB
37 lines
1.4 KiB
<div id="galleryModal" class="modal fade" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="galleryModalLabel">Fotografie</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zavřít"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="d-flex h-100 align-items-center justify-content-center">
|
|
<img src="" class="img-fluid" alt="Fotografie">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zavřít</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const galleryModal = document.getElementById('galleryModal')
|
|
if (galleryModal) {
|
|
galleryModal.addEventListener('show.bs.modal', event => {
|
|
// Button that triggered the modal
|
|
const button = event.relatedTarget
|
|
// Extract info from data-bs-* attributes
|
|
const image = button.getAttribute('data-bs-image')
|
|
const label = button.getAttribute('data-bs-label')
|
|
// Update the modal's content.
|
|
const modalTitle = galleryModal.querySelector('.modal-title')
|
|
const modalImage = galleryModal.querySelector('.modal-body img')
|
|
|
|
modalTitle.textContent = label
|
|
modalImage.src = `/static/images/image_${image}`
|
|
})
|
|
}
|
|
</script>
|
|
|