This commit is contained in:
Roman Pyrih
2025-05-20 15:55:55 +02:00
parent 7760ccd0cb
commit f8fabea8b2
26 changed files with 776 additions and 27 deletions

View File

@@ -12,10 +12,15 @@ jQuery(function ($) {
}
})
$('#frame-box .frame-box-content-bg, #frame-box .frame-box-content-bg img').css('width', `${frameScrollWidth}px`)
$(
'#frame-box .frame-box-content-bg, #frame-box .frame-box-content-bg img'
).css('width', `${frameScrollWidth}px`)
$('#frame-box .piano-keys').css('width', `${frameScrollWidth}px`)
frameScrollWidth = frameScrollWidth - parseFloat($('#frame-box').width())
$('.frame-box-content-data, #frame-box .piano').css( 'width', `${frameScrollWidth}px` )
$('.frame-box-content-data, #frame-box .piano').css(
'width',
`${frameScrollWidth}px`
)
let dragHandle = document.querySelector('#drag-handle')
Draggable.create(dragHandle, {
@@ -100,21 +105,37 @@ jQuery(function ($) {
$('#frame-box nav #nav_foto').on('click', function () {
$('#frame-box #foto').show()
$('#frame-box #plyty').hide()
$('#frame-box #biogram').hide()
})
$('#frame-box nav #nav_plyty').on('click', function () {
$('#frame-box #foto').hide()
$('#frame-box #plyty').show()
$('#frame-box #biogram').hide()
})
$('#frame-box nav #nav_intro').on('click', function () {
$('#frame-box #intro').show()
$('#frame-box #foto').hide()
$('#frame-box #plyty').hide()
$('#frame-box #biogram').hide()
})
$('#frame-box #intro p').on('click', function () {
$('#frame-box #intro').hide()
$('#frame-box #foto').hide()
$('#frame-box #plyty').show()
$('#frame-box #biogram').hide()
})
$('#frame-box nav #nav_biogram').on('click', function () {
$('#frame-box #biogram').show()
$('#frame-box #intro').hide()
$('#frame-box #foto').hide()
$('#frame-box #plyty').hide()
})
$('#frame-box nav#nav ul#nav_ul li').on('click', function () {
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
$(this).addClass('active')
})
})
@@ -181,17 +202,17 @@ jQuery(function ($) {
turning: function (event, page, view) {
if (page === 1) {
// event.preventDefault()
if (!$(event.target).closest('a').length) {
event.preventDefault();
if (!$(event.target).closest('a').length) {
event.preventDefault()
}
}
},
},
})
$('#flipbook').on('touchstart', 'a', function (event) {
event.stopPropagation();
});
$('#flipbook').on('touchstart', 'a', function (event) {
event.stopPropagation()
})
$(document).on('click', 'ul.table-of-contents', function (e) {
e.stopPropagation()
@@ -211,3 +232,32 @@ jQuery(function ($) {
$('#flipbook').turn('page', 2)
})
})
jQuery(function ($) {
var swiper_biogram = new Swiper('.swiper_biogram', {
// Не використовуємо стандартну пагінацію Swiper
loop: false,
on: {
slideChange: function () {
updateCustomPagination(swiper_biogram.activeIndex)
},
},
})
// Прив'язуємо кліки по елементах пагінації
$('.swiper-pagination li').each(function (index) {
$(this).on('click', function () {
swiper_biogram.slideTo(index)
updateCustomPagination(index)
})
})
// Функція для оновлення активного пункту
function updateCustomPagination(activeIndex) {
$('.swiper-pagination li').removeClass('active')
$('.swiper-pagination li').eq(activeIndex).addClass('active')
}
// Ініціалізація активного елемента
updateCustomPagination(0)
})

View File

@@ -178,6 +178,9 @@ body.page-id-846 #content .page-content {
margin: 0;
cursor: pointer;
}
#frame-box #frame-box-header nav ul li.active img {
filter: brightness(0) invert(1);
}
#frame-box #frame-box-header nav ul li img {
width: 100%;
}
@@ -2123,4 +2126,50 @@ body.page-id-846 #content .page-content {
max-width: unset !important;
width: 100vw;
}
}
.fancybox__slide {
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
transition: all 300ms ease-in-out;
}
#biogram .swiper_biogram {
padding-bottom: 25px;
}
#biogram .swiper_biogram .swiper-slide .slide-img img {
height: 100%;
max-height: 150px;
width: auto;
display: block;
margin: 20px auto 10px;
}
#biogram .swiper_biogram .swiper-slide .slide-text p {
color: #fff;
line-height: 1;
font-size: 12px;
font-weight: 700;
font-family: Arial, sans-serif;
margin-bottom: 10px;
}
#biogram .swiper_biogram .swiper-pagination {
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#biogram .swiper_biogram .swiper-pagination li {
color: #8b3332;
font-size: 19px;
font-weight: 700;
font-family: "Arial", sans-serif;
cursor: pointer;
}
#biogram .swiper_biogram .swiper-pagination li.active {
color: #f3180c;
}/*# sourceMappingURL=custom.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -205,6 +205,12 @@ body {
margin: 0;
cursor: pointer;
&.active {
img {
filter: brightness(0) invert(1);
}
}
img {
width: 100%;
}
@@ -2637,3 +2643,63 @@ body {
}
}
}
.fancybox__slide {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(1px);
transition: all 300ms ease-in-out;
}
#biogram {
.swiper_biogram {
padding-bottom: 25px;
.swiper-slide {
.slide-img {
img {
height: 100%;
max-height: 150px;
width: auto;
display: block;
margin: 20px auto 10px;
}
}
.slide-text {
p {
color: $cTxtWhite;
line-height: 1;
font-size: 12px;
font-weight: 700;
font-family: Arial, sans-serif;
margin-bottom: 10px;
}
}
}
.swiper-pagination {
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
li {
color: #8b3332;
font-size: 19px;
font-weight: 700;
font-family: 'Arial', sans-serif;
cursor: pointer;
&.active {
color: #f3180c;
}
}
}
}
}

View File

@@ -280,3 +280,10 @@ function custom_js() {
wp_enqueue_script('js_code', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'custom_js');
function hello_elementor_swiper_scripts() {
wp_enqueue_style('swiper_styles', get_template_directory_uri() . '/plugins/swiper-11.1.4/swiper.min.css', array(), wp_get_theme()->get('Version'), 'all');
wp_enqueue_script('swiper_code', get_template_directory_uri() . '/plugins/swiper-11.1.4/swiper.min.js', array('jquery'), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'hello_elementor_swiper_scripts', 999);

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Анімація з пагінацією</title>
<title>Animacja z paginacją</title>
<style>
body {
margin: 0;

View File

@@ -13,7 +13,7 @@
<div class="logo">
<img src="/wp-content/uploads/2024/04/12.png" alt="">
</div>
<nav>
<nav id="nav">
<!-- <ul>
<li id="nav_intro">Intro</li>
<li id="nav_plyty">Płyty</li>
@@ -21,7 +21,7 @@
<li>Sklep</li>
<li id="nav_book">Book</li>
</ul> -->
<ul>
<ul id="nav_ul">
<li id="nav_intro">
<img src="/wp-content/uploads/2024/07/intro-1.png" alt="">
</li>
@@ -34,7 +34,7 @@
<li id="nav_book">
<img src="/wp-content/uploads/2024/07/notes-1.png" alt="">
</li>
<li>
<li id="nav_biogram">
<img src="/wp-content/uploads/2024/07/biogram-1.png" alt="">
</li>
<li>
@@ -83,6 +83,32 @@
<?php endif; ?>
</div>
<div id="biogram" style="display: none;">
<?php if (get_field('biogram')) : ?>
<div class="swiper swiper_biogram">
<div class="swiper-wrapper">
<?php foreach (get_field('biogram') as $item) : ?>
<div class="swiper-slide">
<div class="slide-img">
<img src="<?= $item['url']; ?>" alt="">
</div>
<div class="slide-text">
<p><?= $item['description']; ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
<ul class="swiper-pagination">
<?php foreach (get_field('biogram') as $item) : ?>
<li>
<?php echo $item['caption']; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
<div id="book">
<div class="book-actions">
<div class="book-contents" style="display: none;">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long