armanty-quests/parts/gallery/gallery-content.php
2020-11-28 14:21:17 +03:00

47 lines
1.7 KiB
PHP

<div class="gallery-content">
<div class="container gallery-headers">
<div class="row justify-content-center">
<div class="col-md-4 col-sm-4 col-4"><button class="btn btn-danger btn-round"><i class="fa fa-rocket" aria-hidden="true"></i>Квесты</button></div>
<div class="col-md-4 col-sm-4 col-4"><button class="btn btn-danger btn-round"><i class="fa fa-ticket"></i>Праздники</button></div>
<div class="col-md-4 col-sm-4 col-4"><button class="btn btn-danger btn-round"><i class="fa fa-home" aria-hidden="true"></i>Залы</button></div>
</div>
<div class="gallery-photos gallery-photos-holidays row">
<?php echo do_shortcode('[print_gllr id=313]')?>
</div>
<div class="gallery-photos gallery-photos-places row">
<?php echo do_shortcode('[print_gllr id=312]')?>
</div>
<div class="gallery-photos gallery-photos-holidays row">
<?php echo do_shortcode('[print_gllr id=304]')?>
</div>
</div>
</div>
<script>
const btns = document.querySelectorAll('.gallery-headers button');
const galleryBlocks = document.querySelectorAll('.gallery-photos');
btns[0].classList.add('active');
btns.forEach((btn, index) => {
btn.addEventListener('click', (e) => {
btns.forEach((btn, index) => {
btn.classList.remove('active')
})
e.target.closest('button').classList.add('active');
checkGal(index)
})
});
checkGal = index => {
galleryBlocks.forEach(currentItem => {
currentItem.style.display = 'none'
});
if(btns[index].classList.contains('active')){
galleryBlocks[index].style.display = 'flex';
}else{
galleryBlocks[index].style.display = 'none';
}
}
checkGal(0)
</script>