Save
This commit is contained in:
@@ -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)
|
||||
})
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;">
|
||||
|
||||
13
wp-content/themes/hello-elementor/plugins/swiper-11.1.4/swiper.min.css
vendored
Normal file
13
wp-content/themes/hello-elementor/plugins/swiper-11.1.4/swiper.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
14
wp-content/themes/hello-elementor/plugins/swiper-11.1.4/swiper.min.js
vendored
Normal file
14
wp-content/themes/hello-elementor/plugins/swiper-11.1.4/swiper.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user