File: /var/www/vhosts/greenclinic.kz/newsite/wp-content/themes/green-clinic/blocks/photo_gallery.php
<?php
$list = get_sub_field('list');
$list_id = $list[0]['photo']['uploaded_to'];
$i = 1;
$the_post = get_the_ID();
$list_count = count($list);
?>
<div class="container">
<div class="content-wrapper">
<div class="subtitle__container">
<h3 сlass="photogallery__subtitle" id="photogallery__subtitle"></h3>
<p class="photogallery__length"></p>
</div>
<div class="photogallery__container" id="photogallery__container"></div>
</div>
</div>
<div id="modal">
<!--<div class="swiper-button-next"></div>-->
<!--<div class="swiper-button-prev"></div>-->
<div class="modal__content">
<div class="swiper-title-container">
<h3 class="swiper-title"></h3>
<svg
class="close pointer"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6 18"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6 6L18 18"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="swiper-container">
<div class="button-prev pointer" >
<svg class="" xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none"><path d="M11.875 14.25L7.125 9.5l4.75-4.75" stroke="#0F1721" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<!--<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>-->
</div>
</div>
<div class="button-next pointer" >
<svg class="" xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none"><path d="M7.125 4.75l4.75 4.75-4.75 4.75" stroke="#0F1721" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>
</div>
</div>
<script>
let data = {
title: "<?php echo the_title(); ?>",
photos: [<?php foreach($list as $list_item): ?>
<?php
$photo = $list_item['photo'];
$photo_url = $photo['url'];
$photo_title = $photo['title'];
$photo_alt = $photo['alt'];
?>
"<?php echo $photo_url ?>",
<?php endforeach;?>],
};
const photogalleryContainer = document.getElementById(
"photogallery__container"
);
const modal = document.getElementById("modal");
photogalleryContainer.innerHTML = "";
data.photos.forEach((photo, index) => {
let photoCard = `
<div class="photogallery__container-photo pointer">
<div class="photo-overlay">
<svg
width="78"
height="78"
viewBox="0 0 78 78"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M65 65V65.75H65.75V65H65ZM49.2803 48.2197C48.9874 47.9268 48.5126 47.9268 48.2197 48.2197C47.9268 48.5126 47.9268 48.9874 48.2197 49.2803L49.2803 48.2197ZM64.25 45.5V65H65.75V45.5H64.25ZM65 64.25H45.5V65.75H65V64.25ZM65.5303 64.4697L49.2803 48.2197L48.2197 49.2803L64.4697 65.5303L65.5303 64.4697Z"
fill="white"
/>
<path
d="M13 65H12.25V65.75H13V65ZM29.7803 49.2803C30.0732 48.9874 30.0732 48.5126 29.7803 48.2197C29.4874 47.9268 29.0126 47.9268 28.7197 48.2197L29.7803 49.2803ZM12.25 45.5V65H13.75V45.5H12.25ZM13 65.75H32.5V64.25H13V65.75ZM13.5303 65.5303L29.7803 49.2803L28.7197 48.2197L12.4697 64.4697L13.5303 65.5303Z"
fill="white"
/>
<path
d="M65 13H65.75V12.25H65V13ZM48.2197 28.7197C47.9268 29.0126 47.9268 29.4874 48.2197 29.7803C48.5126 30.0732 48.9874 30.0732 49.2803 29.7803L48.2197 28.7197ZM65.75 32.5V13H64.25V32.5H65.75ZM65 12.25H45.5V13.75H65V12.25ZM64.4697 12.4697L48.2197 28.7197L49.2803 29.7803L65.5303 13.5303L64.4697 12.4697Z"
fill="white"
/>
<path
d="M13 13V12.25H12.25V13H13ZM28.7197 29.7803C29.0126 30.0732 29.4874 30.0732 29.7803 29.7803C30.0732 29.4874 30.0732 29.0126 29.7803 28.7197L28.7197 29.7803ZM13.75 32.5V13H12.25V32.5H13.75ZM13 13.75H32.5V12.25H13V13.75ZM12.4697 13.5303L28.7197 29.7803L29.7803 28.7197L13.5303 12.4697L12.4697 13.5303Z"
fill="white"
/>
</svg>
</div>
</div>
`;
photogalleryContainer.innerHTML += photoCard;
});
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".button-next",
prevEl: ".button-prev",
},
// allowSlideNext: false,
// allowSlidePrev: false,
allowTouchMove: false,
});
let swiperContainer = document.querySelector(".swiper-wrapper");
data.photos.forEach((element) => {
let slide = document.createElement("div");
slide.classList.add("swiper-slide");
slide.style.backgroundImage = `url('${element}')`;
swiperContainer.appendChild(slide);
});
const buttonPrev = document.querySelector(".button-prev");
buttonPrev.addEventListener("click", function () {
console.log("buttonPrev");
var currentIndex = swiper.activeIndex + 1;
console.log("Current Slide Index:", currentIndex);
if (currentIndex === 1) {
buttonPrev.style.opacity = "50%";
}
if (currentIndex === data.photos.length) {
buttonNext.style.opacity = "50%";
}
if (currentIndex !== 1) {
buttonPrev.style.opacity = "100%";
}
if (currentIndex !== data.photos.length) {
buttonNext.style.opacity = "100%";
}
});
const buttonNext = document.querySelector(".button-next");
buttonNext.addEventListener("click", function () {
console.log("buttonNext");
var currentIndex = swiper.activeIndex + 1;
console.log("Current Slide Index:", currentIndex);
if (currentIndex === 1) {
buttonPrev.style.opacity = "50%";
}
if (currentIndex === data.photos.length) {
buttonNext.style.opacity = "50%";
}
if (currentIndex !== 1) {
buttonPrev.style.opacity = "100%";
}
if (currentIndex !== data.photos.length) {
buttonNext.style.opacity = "100%";
}
});
let photoCards = document.querySelectorAll(
".photogallery__container-photo"
);
photoCards.forEach((element, index) => {
element.addEventListener("click", function () {
modal.style.display = "flex";
// Use the Swiper API to change the active slide
swiper.slideTo(index);
console.log("index", index);
console.log("swiper.activeIndex", swiper.activeIndex);
var currentIndex = swiper.activeIndex + 1;
if (currentIndex === 1) {
buttonPrev.style.opacity = "50%";
}
if (currentIndex === data.photos.length) {
buttonNext.style.opacity = "50%";
}
if (currentIndex !== 1) {
buttonPrev.style.opacity = "100%";
}
if (currentIndex !== data.photos.length) {
buttonNext.style.opacity = "100%";
}
});
element.style.backgroundImage = `url('${data.photos[index]}')`;
});
let photosSubtitle = document.querySelector("#photogallery__subtitle");
let photosLength = document.querySelector(".photogallery__length");
console.log("photosSubtitle", photosSubtitle);
console.log("photosLength", photosLength);
photosSubtitle.textContent = data.title;
photosLength.textContent = `${data.photos.length} фото`;
let close = document.querySelector(".close");
close.addEventListener("click", function () {
modal.style.display = "none";
});
let swiperTitle = document.querySelector(".swiper-title");
swiperTitle.textContent = data.title;
window.addEventListener("click", function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
});
</script>