Для того, чтобы реализовать открытие галереи при нажатии на кнопку или ссылку в div блоке с помощью JavaScript, можно использовать популярные библиотеки, например, FancyBox или Lightbox.
Ниже приведен пример реализации с использованием библиотеки FancyBox:
1. Подключите библиотеку FancyBox к вашему проекту, добавив ссылку на CDN в разделе <head> вашего HTML документа:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
2. Добавьте HTML разметку для вашего div блока с кнопкой или ссылкой, а также для галереи изображений:
<div id="gallery"> <a data-fancybox="gallery" href="image1.jpg"><img src="thumbnail1.jpg" alt="Image 1"></a> <a data-fancybox="gallery" href="image2.jpg"><img src="thumbnail2.jpg" alt="Image 2"></a> <!-- Добавьте больше изображений по аналогии --> </div> <button onclick="openGallery()">Открыть галерею</button>
3. Напишите JavaScript функцию, которая будет открывать галерею при нажатии на кнопку:
function openGallery() {
$.fancybox.open({
src : '#gallery',
type : 'inline'
});
}
4. Готово! Теперь при нажатии на кнопку "Открыть галерею" в div блоке будет открыта галерея изображений с использованием FancyBox.
Обратите внимание, что в этом примере используется jQuery для удобства работы с DOM, поэтому убедитесь, что вы подключили jQuery перед подключением FancyBox. А также обязательно проверьте совместимость версий библиотек, чтобы избежать конфликтов.
Надеюсь, данное объяснение оказалось полезным. Если у вас возникнут дополнительные вопросы или вам понадобится дальнейшая помощь, пожалуйста, не стесняйтесь спрашивать.