Good-Production/Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

full

Browse Source
This commit is contained in:
GP_DEV
2025-07-08 14:21:19 +03:00
parent a6bb81cbe1
commit 21562852ca
65 changed files with 7464 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
template-parts/la-components/blocks/simple-gallery/simple-gallery.js Normal file
View File

@@ -0,0 +1,126 @@
document.addEventListener('DOMContentLoaded', function () {
// Небольшая задержка для корректной инициализации GLightbox
setTimeout(() => {
document.querySelectorAll('.simple-gallery-block').forEach(function (block) {
const blockId = block.getAttribute('data-gallery-id');
initSimpleGallery(blockId);
});
}, 100);
});
function initSimpleGallery(blockId) {
const container = document.getElementById(blockId);
if (!container) return;
let mainSwiper;
let thumbnailSwiper;
let lightbox;
// Проверяем, одно изображение или несколько
const isSingleImage = container.querySelector('.single-image');
const hasMultipleImages = container.querySelector('.gallery-swiper');
function initLightbox() {
if (typeof GLightbox === 'undefined') {
console.warn('GLightbox is not loaded');
return;
}
const selector = `#${blockId} .glightbox`;
if (lightbox) {
lightbox.destroy();
}
lightbox = GLightbox({
selector: selector,
preload: false,
touchNavigation: true,
loop: true
});
}
function updateThumbnails(activeIndex) {
const thumbnails = container.querySelectorAll('.thumbnail');
thumbnails.forEach((thumb, index) => {
if (index === activeIndex) {
thumb.classList.remove('opacity-50', 'hover:opacity-80');
thumb.classList.add('opacity-100', 'active');
} else {
thumb.classList.remove('opacity-100', 'active');
thumb.classList.add('opacity-50', 'hover:opacity-80');
}
});
}
function centerThumbnail(activeIndex) {
if (thumbnailSwiper) {
thumbnailSwiper.slideTo(activeIndex);
}
}
// Инициализация для одного изображения
if (isSingleImage) {
initLightbox();
window.addEventListener('beforeunload', () => {
if (lightbox) lightbox.destroy();
});
return;
}
// Инициализация для множественных изображений
if (hasMultipleImages) {
// Thumbnail swiper
thumbnailSwiper = new Swiper(`#${blockId} .thumbnail-swiper`, {
slidesPerView: 'auto',
spaceBetween: 6,
freeMode: true,
grabCursor: true,
watchSlidesProgress: true,
});
// Main swiper
mainSwiper = new Swiper(`#${blockId} .gallery-swiper`, {
slidesPerView: 'auto',
spaceBetween: 0,
grabCursor: true,
watchSlidesProgress: true,
lazy: {
loadPrevNext: true,
loadOnTransitionStart: true,
},
on: {
slideChange: function () {
updateThumbnails(this.realIndex);
centerThumbnail(this.realIndex);
}
}
});
// Lightbox для множественных изображений
initLightbox();
// Обработчик клика по thumbnail
container.addEventListener('click', (e) => {
const thumbnail = e.target.closest('.thumbnail');
if (!thumbnail) return;
const index = parseInt(thumbnail.getAttribute('data-index'));
if (mainSwiper) {
mainSwiper.slideTo(index);
}
updateThumbnails(index);
centerThumbnail(index);
});
// Cleanup
window.addEventListener('beforeunload', () => {
if (mainSwiper) mainSwiper.destroy();
if (thumbnailSwiper) thumbnailSwiper.destroy();
if (lightbox) lightbox.destroy();
});
}
}

117
template-parts/la-components/blocks/simple-gallery/simple-gallery.php Normal file
View File

@@ -0,0 +1,117 @@
<?php
$id = 'simple-gallery-' . $block['id'];
if (!empty($block['anchor'])) {
$id = $block['anchor'];
}
$classes = 'block-simple-gallery';
if (!empty($block['className'])) {
$classes .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
$classes .= ' align' . $block['align'];
}
$heading = get_field('heading');
$description = get_field('description');
$gallery_images = get_field('gallery_images');
?>
<div class="simple-gallery-block pt-[90px]"
id="<?php echo esc_attr($id); ?>"
data-gallery-id="<?php echo esc_attr($id); ?>">
<div class="container mx-auto">
<div class="flex gap-[48px] justify-between flex-wrap items-start">
<div class="gallery-section w-full max-w-[535px]">
<?php if ($gallery_images && !empty($gallery_images)) : ?>
<?php if (count($gallery_images) === 1) : ?>
<div class="single-image max-w-[535px] h-[500px]">
<a href="<?php echo esc_url($gallery_images[0]['url']); ?>"
class="glightbox block w-full h-full"
data-gallery="simple-gallery-<?php echo esc_attr($id); ?>">
<img src="<?php echo esc_url($gallery_images[0]['url']); ?>"
alt="<?php echo esc_attr($gallery_images[0]['alt']); ?>"
class="w-full h-full object-cover rounded-[24px]"
width="<?php echo esc_attr($gallery_images[0]['width']); ?>"
height="<?php echo esc_attr($gallery_images[0]['height']); ?>"
fetchpriority="high">
</a>
</div>
<?php else : ?>
<div class="swiper !m-0 max-w-[535px] gallery-swiper h-[500px] rounded-[24px]">
<div class="swiper-wrapper">
<?php foreach ($gallery_images as $img_index => $image) : ?>
<div class="swiper-slide max-w-[648px] cursor-pointer min-h-[500px]">
<a href="<?php echo esc_url($image['url']); ?>"
class="glightbox block w-full h-full"
data-gallery="simple-gallery-<?php echo esc_attr($id); ?>">
<?php if ($img_index === 0) : ?>
<img src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
class="w-full h-full object-cover"
width="<?php echo esc_attr($image['width']); ?>"
height="<?php echo esc_attr($image['height']); ?>"
fetchpriority="high">
<?php else : ?>
<img data-src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
class="w-full h-full object-cover swiper-lazy"
width="<?php echo esc_attr($image['width']); ?>"
height="<?php echo esc_attr($image['height']); ?>">
<div class="swiper-lazy-preloader"></div>
<?php endif; ?>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Thumbnails -->
<div class="relative mt-[8px]">
<div class="swiper thumbnail-swiper">
<div class="swiper-wrapper">
<?php foreach ($gallery_images as $thumb_index => $image) : ?>
<div class="swiper-slide max-w-[102px] !h-[62px]">
<div class="thumbnail w-full h-full overflow-hidden cursor-pointer transition-opacity duration-[180ms] ease-in-out <?php echo $thumb_index === 0 ? 'active opacity-100' : 'opacity-50 hover:opacity-80'; ?>"
data-index="<?php echo $thumb_index; ?>">
<img src="<?php echo esc_url($image['sizes']['thumbnail'] ?? $image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
class="w-full rounded-[6px] h-full object-cover"
width="102"
height="62">
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="content-section w-full max-w-[725px]">
<div class="py-[48px] pr-[12px]">
<?php if ($heading) : ?>
<h2 class="text-[48px] font-[700] leading-[110%] mb-[24px]"><?php echo esc_html($heading); ?></h2>
<?php endif; ?>
<?php if ($description) : ?>
<div class="text-[18px] leading-[150%] text-gray-600">
<?php echo $description ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>