блоки в админку и фиксы стилей
This commit is contained in:
GP_DEV
@@ -12,23 +12,51 @@ function initGalleryBlock(blockId) {
|
||||
const swipers = {};
|
||||
let lightbox;
|
||||
|
||||
function initSwiper(tabId) {
|
||||
if (swipers[tabId]) {
|
||||
swipers[tabId].destroy(true, true);
|
||||
}
|
||||
function initAllSwipers() {
|
||||
const tabs = container.querySelectorAll('.tab-button');
|
||||
|
||||
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 20,
|
||||
loop: true,
|
||||
centeredSlides: true,
|
||||
navigation: {
|
||||
nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
|
||||
prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
|
||||
},
|
||||
on: {
|
||||
slideChange: function() {
|
||||
updateThumbnails(tabId, this.realIndex);
|
||||
tabs.forEach(button => {
|
||||
const tabId = button.getAttribute('data-tab');
|
||||
const tabContent = container.querySelector(`#tab-${tabId}`);
|
||||
|
||||
if (tabContent && tabContent.querySelector('.swiper')) {
|
||||
const wasHidden = tabContent.classList.contains('hidden');
|
||||
if (wasHidden) {
|
||||
tabContent.style.visibility = 'hidden';
|
||||
tabContent.style.position = 'absolute';
|
||||
tabContent.classList.remove('hidden');
|
||||
tabContent.classList.add('block');
|
||||
}
|
||||
|
||||
if (swipers[tabId]) {
|
||||
swipers[tabId].destroy(true, true);
|
||||
}
|
||||
|
||||
swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 20,
|
||||
loop: true,
|
||||
centeredSlides: true,
|
||||
grabCursor: true,
|
||||
observer: true,
|
||||
observeParents: true,
|
||||
watchSlidesProgress: true,
|
||||
navigation: {
|
||||
nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
|
||||
prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
|
||||
},
|
||||
on: {
|
||||
slideChange: function() {
|
||||
updateThumbnails(tabId, this.realIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (wasHidden) {
|
||||
tabContent.style.visibility = '';
|
||||
tabContent.style.position = '';
|
||||
tabContent.classList.add('hidden');
|
||||
tabContent.classList.remove('block');
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -57,7 +85,14 @@ function initGalleryBlock(blockId) {
|
||||
});
|
||||
}
|
||||
|
||||
// Табы
|
||||
initAllSwipers();
|
||||
|
||||
const activeTab = container.querySelector('.tab-button.active');
|
||||
if (activeTab) {
|
||||
const tabId = activeTab.getAttribute('data-tab');
|
||||
initLightbox(tabId);
|
||||
}
|
||||
|
||||
container.querySelectorAll('.tab-button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const tabId = button.getAttribute('data-tab');
|
||||
@@ -73,17 +108,21 @@ function initGalleryBlock(blockId) {
|
||||
content.classList.remove('block');
|
||||
content.classList.add('hidden');
|
||||
});
|
||||
container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
|
||||
container.querySelector(`#tab-${tabId}`).classList.add('block');
|
||||
|
||||
setTimeout(() => {
|
||||
initSwiper(tabId);
|
||||
initLightbox(tabId);
|
||||
}, 100);
|
||||
const targetTab = container.querySelector(`#tab-${tabId}`);
|
||||
targetTab.classList.remove('hidden');
|
||||
targetTab.classList.add('block');
|
||||
|
||||
if (swipers[tabId]) {
|
||||
requestAnimationFrame(() => {
|
||||
swipers[tabId].update();
|
||||
});
|
||||
}
|
||||
|
||||
initLightbox(tabId);
|
||||
});
|
||||
});
|
||||
|
||||
// Thumbnails
|
||||
container.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.thumbnail')) {
|
||||
const thumbnail = e.target.closest('.thumbnail');
|
||||
@@ -98,13 +137,4 @@ function initGalleryBlock(blockId) {
|
||||
updateThumbnails(tabId, index);
|
||||
}
|
||||
});
|
||||
|
||||
const firstTab = container.querySelector('.tab-button.active');
|
||||
if (firstTab) {
|
||||
const tabId = firstTab.getAttribute('data-tab');
|
||||
setTimeout(() => {
|
||||
initSwiper(tabId);
|
||||
initLightbox(tabId);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
@@ -1,136 +1,86 @@
|
||||
<?php
|
||||
|
||||
// Моковые данные (потом заменить на ACF поля)
|
||||
$galleryData = [
|
||||
'reception' => [
|
||||
'title' => 'Зона ресепшен',
|
||||
'images' => [
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/4a5568/ffffff?text=Ресепшен+1',
|
||||
'thumb' => 'https://placehold.co/150x100/4a5568/ffffff?text=Р1',
|
||||
'alt' => 'Ресепшен 1'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/2d3748/ffffff?text=Ресепшен+2',
|
||||
'thumb' => 'https://placehold.co/150x100/2d3748/ffffff?text=Р2',
|
||||
'alt' => 'Ресепшен 2'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/1a202c/ffffff?text=Ресепшен+3',
|
||||
'thumb' => 'https://placehold.co/150x100/1a202c/ffffff?text=Р3',
|
||||
'alt' => 'Ресепшен 3'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/718096/ffffff?text=Ресепшен+4',
|
||||
'thumb' => 'https://placehold.co/150x100/718096/ffffff?text=Р4',
|
||||
'alt' => 'Ресепшен 4'
|
||||
]
|
||||
]
|
||||
],
|
||||
'gym' => [
|
||||
'title' => 'Зона тренажерного зала',
|
||||
'images' => [
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/dc2626/ffffff?text=Тренажёрный+1',
|
||||
'thumb' => 'https://placehold.co/150x100/dc2626/ffffff?text=Т1',
|
||||
'alt' => 'Тренажерный зал 1'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/b91c1c/ffffff?text=Тренажёрный+2',
|
||||
'thumb' => 'https://placehold.co/150x100/b91c1c/ffffff?text=Т2',
|
||||
'alt' => 'Тренажерный зал 2'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/991b1b/ffffff?text=Тренажёрный+3',
|
||||
'thumb' => 'https://placehold.co/150x100/991b1b/ffffff?text=Т3',
|
||||
'alt' => 'Тренажерный зал 3'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/7f1d1d/ffffff?text=Тренажёрный+4',
|
||||
'thumb' => 'https://placehold.co/150x100/7f1d1d/ffffff?text=Т4',
|
||||
'alt' => 'Тренажерный зал 4'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/ef4444/ffffff?text=Тренажёрный+5',
|
||||
'thumb' => 'https://placehold.co/150x100/ef4444/ffffff?text=Т5',
|
||||
'alt' => 'Тренажерный зал 5'
|
||||
]
|
||||
]
|
||||
],
|
||||
'group' => [
|
||||
'title' => 'Залы для групповых тренировок',
|
||||
'images' => [
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/059669/ffffff?text=Групповые+1',
|
||||
'thumb' => 'https://placehold.co/150x100/059669/ffffff?text=Г1',
|
||||
'alt' => 'Групповые тренировки 1'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/047857/ffffff?text=Групповые+2',
|
||||
'thumb' => 'https://placehold.co/150x100/047857/ffffff?text=Г2',
|
||||
'alt' => 'Групповые тренировки 2'
|
||||
],
|
||||
[
|
||||
'src' => 'https://placehold.co/800x600/065f46/ffffff?text=Групповые+3',
|
||||
'thumb' => 'https://placehold.co/150x100/065f46/ffffff?text=Г3',
|
||||
'alt' => 'Групповые тренировки 3'
|
||||
]
|
||||
]
|
||||
]
|
||||
];
|
||||
$id = 'gallery-tabs-' . $block['id'];
|
||||
if ( ! empty($block['anchor'] ) ) {
|
||||
$id = $block['anchor'];
|
||||
}
|
||||
|
||||
$classes = 'block-gallery-tabs';
|
||||
if ( ! empty( $block['className'] ) ) {
|
||||
$classes .= ' ' . $block['className'];
|
||||
}
|
||||
if ( ! empty( $block['align'] ) ) {
|
||||
$classes .= ' align' . $block['align'];
|
||||
}
|
||||
|
||||
$heading = get_field('heading');
|
||||
$slider_tabs = get_field('slider_tabs');
|
||||
|
||||
$block_id = 'gallery-' . $block['id'];
|
||||
?>
|
||||
|
||||
<div class="gallery-block"
|
||||
id="<?php echo $block_id; ?>"
|
||||
data-gallery-id="<?php echo $block_id; ?>">
|
||||
<div class="gallery-block mt-[24px]"
|
||||
id="<?php echo esc_attr( $id ); ?>"
|
||||
data-gallery-id="<?php echo esc_attr( $id ); ?>">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-[32px] font-bold mb-[30px]">Галерея</h2>
|
||||
|
||||
<div class="flex gap-[10px] mb-[30px]">
|
||||
<?php foreach ($galleryData as $index => $tab): ?>
|
||||
<button class="tab-button px-[24px] py-[12px] border-0 rounded-[25px] cursor-pointer transition-all <?php echo $index === 'reception' ? 'active underline' : ''; ?>"
|
||||
data-tab="<?php echo $index; ?>">
|
||||
<?php echo esc_html($tab['title']); ?>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php if ($heading) : ?>
|
||||
<h2 class="text-[32px] font-bold"><?php echo esc_html($heading); ?></h2>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php foreach ($galleryData as $tab_id => $tab_data): ?>
|
||||
<div class="tab-content <?php echo $tab_id === 'reception' ? 'block' : 'hidden'; ?>"
|
||||
id="tab-<?php echo $tab_id; ?>">
|
||||
|
||||
<div class="swiper gallery-swiper mb-[20px] h-[440px]" id="swiper-<?php echo $tab_id; ?>">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($tab_data['images'] as $image): ?>
|
||||
<div class="swiper-slide cursor-pointer min-h-[440px]">
|
||||
<a href="<?php echo esc_url($image['src']); ?>"
|
||||
class="glightbox block w-full h-full"
|
||||
data-gallery="gallery-<?php echo $tab_id; ?>">
|
||||
<img src="<?php echo esc_url($image['src']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt']); ?>"
|
||||
class="w-full h-full object-cover">
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-[8px] overflow-x-auto">
|
||||
<?php foreach ($tab_data['images'] as $thumb_index => $image): ?>
|
||||
<div class="thumbnail flex-shrink-0 w-[80px] h-[60px] rounded-[5px] overflow-hidden cursor-pointer border-2 border-transparent <?php echo $thumb_index === 0 ? 'active !border-blue-500' : ''; ?>"
|
||||
data-index="<?php echo $thumb_index; ?>">
|
||||
<img src="<?php echo esc_url($image['thumb']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt']); ?>"
|
||||
class="w-full h-full object-cover">
|
||||
</div>
|
||||
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
||||
<div class="flex gap-[10px] mt-[24px]">
|
||||
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
||||
<?php if (!empty($tab['tab_name'])) : ?>
|
||||
<button class="tab-button px-[24px] py-[12px] border rounded-[25px] cursor-pointer transition-all <?php echo $tab_index === 0 ? 'active underline' : ''; ?>"
|
||||
data-tab="<?php echo $tab_index; ?>">
|
||||
<?php echo esc_html($tab['tab_name']); ?>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
||||
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
||||
<div class="tab-content <?php echo $tab_index === 0 ? 'block' : 'hidden'; ?>"
|
||||
id="tab-<?php echo $tab_index; ?>">
|
||||
|
||||
<?php if (!empty($tab['slider_images'])) : ?>
|
||||
<div class="swiper mt-[24px] gallery-swiper h-[440px]" id="swiper-<?php echo $tab_index; ?>">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($tab['slider_images'] as $image) : ?>
|
||||
<div class="swiper-slide cursor-pointer min-h-[440px]">
|
||||
<a href="<?php echo esc_url($image['url']); ?>"
|
||||
class="glightbox block w-full h-full"
|
||||
data-gallery="gallery-<?php echo $tab_index; ?>">
|
||||
<img src="<?php echo esc_url($image['url']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt']); ?>"
|
||||
class="w-full h-full object-cover">
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-[24px] gap-[8px] overflow-x-auto">
|
||||
<?php foreach ($tab['slider_images'] as $thumb_index => $image) : ?>
|
||||
<div class="thumbnail flex-shrink-0 w-[80px] h-[60px] rounded-[5px] overflow-hidden cursor-pointer border-2 border-transparent <?php echo $thumb_index === 0 ? 'active !border-blue-500' : ''; ?>"
|
||||
data-index="<?php echo $thumb_index; ?>">
|
||||
<img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt']); ?>"
|
||||
class="w-full h-full object-cover">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($image['caption'])) : ?>
|
||||
<p><?php echo esc_html($image['caption']); ?></p>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
Reference in New Issue
Block a user