Сайт Fakel Gym
https://fakelgym.cp.good-production.xyz/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
12 KiB
165 lines
12 KiB
<?php
|
|
|
|
$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'];
|
|
}
|
|
|
|
$use_homepage_content = get_field('use_homepage_content');
|
|
|
|
if ($use_homepage_content) {
|
|
$homepage_id = get_option('page_on_front');
|
|
|
|
if ($homepage_id) {
|
|
$page_content = get_post_field('post_content', $homepage_id);
|
|
$blocks = parse_blocks($page_content);
|
|
|
|
foreach ($blocks as $homepage_block) {
|
|
if ($homepage_block['blockName'] === 'acf/gallery-tabs') {
|
|
echo render_block($homepage_block);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$heading = get_field('heading');
|
|
$slider_tabs = get_field('slider_tabs');
|
|
|
|
?>
|
|
|
|
<div class="container mx-auto gallery-block max-[768px]:pb-[45px] pb-[90px] <?php if (!is_front_page()): echo 'pb-0 max-[768px]:py-[40px] py-[90px] mt-0'; endif ?>"
|
|
id="<?php echo esc_attr($id); ?>"
|
|
data-gallery-id="<?php echo esc_attr($id); ?>">
|
|
|
|
<div>
|
|
<div class="flex justify-between flex-wrap max-[1050px]:flex-col gap-[16px]">
|
|
<?php if ($heading) : ?>
|
|
<h2 class="font-[700] leading-[110%] max-[1330px]:text-[36px] max-[768px]:text-[24px] text-[48px]"><?php echo esc_html($heading); ?></h2>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
|
<div class="max-[1050px]:max-w-full max-[1050px]:flex-nowrap overflow-x-auto overflow-y-hidden flex max-w-[872px] flex-wrap gap-[8px]">
|
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
|
<?php if (!empty($tab['tab_name'])) : ?>
|
|
<button class="max-[768px]:h-[41px] max-[768px]:flex max-[768px]:px-[16px] max-[768px]:items-center max-[768px]:justify-center max-[768px]:py-0 max-[768px]:text-[15px] tab-button max-[1050px]:whitespace-nowrap h-[51px] grey-gradient-button rounded-[90px] py-[8px] px-[28px] cursor-pointer transition-all <?php echo $tab_index === 0 ? 'active' : ''; ?>"
|
|
data-tab="<?php echo $tab_index; ?>">
|
|
<?php echo esc_html($tab['tab_name']); ?>
|
|
</button>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
|
|
<?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
|
|
<div class=" tab-content relative <?php echo $tab_index === 0 ? 'block' : 'hidden'; ?>"
|
|
id="tab-<?php echo $tab_index; ?>">
|
|
|
|
<?php if (!empty($tab['slider_images'])) : ?>
|
|
|
|
<div class="max-[768px]:!px-[24px] max-[768px]:!mx-[-24px] max-[768px]:mt-[24px] swiper max-[768px]:h-[220px] max-w-[2000px] mt-[45px] gallery-swiper h-[440px]"
|
|
id="swiper-<?php echo $tab_index; ?>">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($tab['slider_images'] as $img_index => $image) : ?>
|
|
<div class="max-[768px]:max-w-[327px] max-[768px]:min-h-[220px] swiper-slide max-w-[648px] cursor-pointer min-h-[440px]">
|
|
<a href="<?php echo esc_url($image['url']); ?>"
|
|
class="glightbox block w-full h-full relative group overflow-hidden rounded-[24px]"
|
|
data-gallery="gallery-<?php echo $tab_index; ?>">
|
|
|
|
<div class="absolute inset-0 bg-[rgba(51,51,51,0.52)] opacity-0 group-hover:opacity-[100%] transition-opacity ease-in-out z-10 flex items-center justify-center">
|
|
<div class="
|
|
min-w-[76px]
|
|
min-h-[76px]
|
|
w-[76px]
|
|
h-[76px]
|
|
rounded-full
|
|
relative
|
|
overflow-hidden
|
|
border-[0.76px]
|
|
border-white/[0.14]
|
|
mx-auto
|
|
before:content-['']
|
|
before:absolute
|
|
before:top-[-10px]
|
|
before:left-[-10px]
|
|
before:right-[-10px]
|
|
before:bottom-[-10px]
|
|
before:bg-gradient-to-r
|
|
before:from-[#2B2C35]
|
|
before:from-[39.4%]
|
|
before:to-[#6E7996]
|
|
before:to-[92.9%]
|
|
before:blur-[7px]
|
|
before:opacity-[0.62]
|
|
before:-z-10
|
|
before:w-[76px]
|
|
before:h-[76px]
|
|
scale-90 group-hover:scale-100
|
|
transition
|
|
grid place-content-center
|
|
relative
|
|
">
|
|
<svg class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M27.2511 1.95288L27.2506 7.9773C27.2506 8.13545 27.2195 8.29204 27.1589 8.43814C27.0984 8.58425 27.0097 8.717 26.8978 8.82881C26.786 8.94063 26.6532 9.02933 26.5071 9.08983C26.361 9.15034 26.2044 9.18147 26.0462 9.18146C25.8881 9.18144 25.7315 9.15028 25.5854 9.08975C25.4393 9.02921 25.3065 8.94049 25.1947 8.82866C24.9689 8.60279 24.8421 8.29647 24.8421 7.97707V4.86345L17.8434 11.8682C17.7316 11.9803 17.5987 12.0693 17.4524 12.1298C17.306 12.1904 17.1492 12.2214 16.9908 12.2211C16.7526 12.2212 16.5197 12.1506 16.3216 12.0184C16.1235 11.8861 15.9691 11.698 15.8779 11.478C15.7866 11.2579 15.7628 11.0157 15.8092 10.7821C15.8557 10.5485 15.9704 10.3338 16.1388 10.1654L23.1397 3.15772H20.0268C19.7073 3.15772 19.4008 3.03078 19.1749 2.80483C18.9489 2.57888 18.822 2.27243 18.822 1.95288C18.822 1.63334 18.9489 1.32689 19.1749 1.10094C19.4008 0.874985 19.7073 0.748047 20.0268 0.748047H26.0462C26.366 0.748047 26.6721 0.875074 26.8982 1.10138C27.1241 1.32719 27.251 1.63349 27.2511 1.95288ZM26.0465 18.8175C25.727 18.8176 25.4206 18.9446 25.1947 19.1706C24.9689 19.3966 24.842 19.703 24.8421 20.0225V23.1361L17.9608 16.3135C17.4899 15.843 16.695 15.8426 16.2246 16.313C15.7539 16.7828 15.7377 17.5458 16.2076 18.016L23.0195 24.8421H19.9007C19.5811 24.842 19.2746 24.9689 19.0485 25.1948C18.8224 25.4207 18.6953 25.7271 18.6952 26.0467C18.6951 26.2048 18.7261 26.3614 18.7866 26.5076C18.847 26.6537 18.9357 26.7864 19.0475 26.8983C19.1593 27.0101 19.292 27.0989 19.4381 27.1594C19.5842 27.2199 19.7407 27.2511 19.8989 27.2511L25.9174 27.2518C26.2374 27.2518 26.6083 27.1247 26.8337 26.8989C27.0595 26.673 27.2513 26.3666 27.2513 26.0474V20.0223C27.2511 19.7028 27.1241 19.3965 26.8982 19.1705C26.6723 18.9446 26.366 18.8176 26.0465 18.8175ZM10.0382 16.2604L3.1575 23.1366V20.0223C3.1575 19.3569 2.62886 18.8188 1.96371 18.8188H1.96868C1.81069 18.8188 1.65425 18.8499 1.50829 18.9104C1.36234 18.9709 1.22975 19.0595 1.1181 19.1713C1.00645 19.2831 0.917928 19.4158 0.857605 19.5618C0.797283 19.7078 0.76634 19.8643 0.766548 20.0223L0.766999 26.0465C0.767059 26.2048 0.7983 26.3615 0.858941 26.5077C0.919581 26.654 1.00843 26.7868 1.12042 26.8987C1.23241 27.0106 1.36534 27.0993 1.51162 27.1598C1.6579 27.2203 1.81467 27.2514 1.97296 27.2513H7.99264C8.31218 27.2513 8.61864 27.1244 8.84459 26.8984C9.07054 26.6725 9.19748 26.366 9.19748 26.0465C9.19748 25.7269 9.07054 25.4205 8.84459 25.1945C8.61864 24.9686 8.31218 24.8416 7.99264 24.8416H4.88059L11.7527 17.9632C12.2236 17.493 12.2175 16.7293 11.747 16.2595C11.2766 15.7898 10.5088 15.7902 10.0382 16.2604ZM4.85939 3.26625H7.97188C8.28639 3.25879 8.58551 3.12862 8.80531 2.90354C9.02512 2.67847 9.14816 2.37635 9.14816 2.06175C9.14816 1.74715 9.02512 1.44503 8.80531 1.21996C8.58551 0.994881 8.28639 0.864706 7.97188 0.857249L1.95288 0.856798H1.95266C1.63321 0.856613 1.32676 0.983297 1.1007 1.209C0.874819 1.43507 0.747971 1.7416 0.748047 2.06118L0.748724 8.08582C0.748784 8.40525 0.875686 8.71158 1.10153 8.93747C1.32738 9.16336 1.63368 9.29032 1.95311 9.29044C2.27254 9.29032 2.57884 9.16336 2.80469 8.93747C3.03053 8.71158 3.15744 8.40525 3.1575 8.08582V4.97175L10.1013 11.9212C10.2131 12.0334 10.346 12.1224 10.4923 12.183C10.6385 12.2436 10.7954 12.2748 10.9537 12.2746C11.192 12.2746 11.425 12.2039 11.6231 12.0715C11.8213 11.9391 11.9757 11.7509 12.0669 11.5308C12.1581 11.3106 12.1819 11.0684 12.1355 10.8347C12.089 10.6009 11.9742 10.3863 11.8057 10.2178L4.85939 3.26625Z" fill="white" />
|
|
</svg>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?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 rounded-[24px]"
|
|
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 rounded-[24px] 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>
|
|
|
|
<div class="relative mt-[24px]">
|
|
<div class="swiper thumbnail-swiper max-[768px]:!px-[24px] max-[768px]:!mx-[-24px]"
|
|
id="thumbnail-swiper-<?php echo $tab_index; ?>">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($tab['slider_images'] as $thumb_index => $image) : ?>
|
|
<div class="max-[768px]:max-w-[105px] max-[768px]:!h-[60px] swiper-slide max-w-[160px] !h-[100px]">
|
|
<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']); ?>"
|
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
|
class="w-full rounded-[12px] h-full object-cover"
|
|
width="160"
|
|
height="100">
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
<div class="swiper-scrollbar !static !mx-auto !cursor-grab mt-[44px] !w-full !p-0" id="swiper-scrollbar-<?php echo $tab_index; ?>"></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</div>
|