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.
86 lines
4.1 KiB
86 lines
4.1 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'];
|
|
}
|
|
|
|
$heading = get_field('heading');
|
|
$slider_tabs = get_field('slider_tabs');
|
|
|
|
?>
|
|
|
|
<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">
|
|
|
|
<?php if ($heading) : ?>
|
|
<h2 class="text-[32px] font-bold"><?php echo esc_html($heading); ?></h2>
|
|
<?php endif; ?>
|
|
|
|
<?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>
|
|
<?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>
|