I need to disable the “Esc” button in the Bootstrap modal instance when the Photoswipe instance is open to prevent closing the modal with that key when closing the lightbox.
I get “Maximum call stack size exceeded” when trying to disable “keyboard” option in the modal instance and then enable it back on the lightbox events:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox in modal</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
Open Image Gallery
</button>
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Image Gallery</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="gallery" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<figure>
<a href="https://picsum.photos/id/12/800/400" data-pswp-width="800" data-pswp-height="400">
<img src="https://picsum.photos/id/12/800/400" alt="Image 1">
</a>
</figure>
</div>
<div class="carousel-item">
<figure>
<a href="https://picsum.photos/id/28/800/400" data-pswp-width="800" data-pswp-height="400">
<img src="https://picsum.photos/id/28/800/400" alt="Image 2">
</a>
</figure>
</div>
<div class="carousel-item">
<figure>
<a href="https://picsum.photos/id/10/800/400" data-pswp-width="800" data-pswp-height="400">
<img src="https://picsum.photos/id/10/800/400" alt="Image 3">
</a>
</figure>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#gallery" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#gallery" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe-lightbox.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const modalElement = document.getElementById('modal');
modalElement.addEventListener('shown.bs.modal', function () {
let modalInstance = bootstrap.Modal.getOrCreateInstance(modalElement);
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
lightbox.on('beforeOpen', () => {
modalInstance._config.keyboard = false;
});
lightbox.on('close', () => {
modalInstance._config.keyboard = true;
});
});
});
</script>
</body>
</html>