Updates to gallery block to sync better thumbnails.
This commit is contained in:
mateuswetah
parent
1a89d67d95
commit
524adfdb56
|
|
@ -206,6 +206,143 @@
|
|||
opacity: 0;
|
||||
z-index: -1000; }
|
||||
|
||||
:root {
|
||||
/*
|
||||
--swiper-pagination-color: var(--swiper-theme-color);
|
||||
--swiper-pagination-bullet-size: 8px;
|
||||
--swiper-pagination-bullet-width: 8px;
|
||||
--swiper-pagination-bullet-height: 8px;
|
||||
--swiper-pagination-bullet-inactive-color: #000;
|
||||
--swiper-pagination-bullet-inactive-opacity: 0.2;
|
||||
--swiper-pagination-bullet-opacity: 1;
|
||||
--swiper-pagination-bullet-horizontal-gap: 4px;
|
||||
--swiper-pagination-bullet-vertical-gap: 6px;
|
||||
*/ }
|
||||
.swiper-pagination {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: 300ms opacity;
|
||||
transform: translate3d(0, 0, 0);
|
||||
z-index: 10; }
|
||||
.swiper-pagination.swiper-pagination-hidden {
|
||||
opacity: 0; }
|
||||
.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
|
||||
display: none !important; }
|
||||
|
||||
/* Common Styles */
|
||||
.swiper-pagination-fraction,
|
||||
.swiper-pagination-custom,
|
||||
.swiper-horizontal > .swiper-pagination-bullets,
|
||||
.swiper-pagination-bullets.swiper-pagination-horizontal {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%; }
|
||||
|
||||
/* Bullets */
|
||||
.swiper-pagination-bullets-dynamic {
|
||||
overflow: hidden;
|
||||
font-size: 0; }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transform: scale(0.33);
|
||||
position: relative; }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
|
||||
transform: scale(1); }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
|
||||
transform: scale(1); }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
|
||||
transform: scale(0.66); }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
|
||||
transform: scale(0.33); }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
|
||||
transform: scale(0.66); }
|
||||
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
|
||||
transform: scale(0.33); }
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
|
||||
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: var(--swiper-pagination-bullet-inactive-color, #000);
|
||||
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); }
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
appearance: none; }
|
||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
||||
cursor: pointer; }
|
||||
.swiper-pagination-bullet:only-child {
|
||||
display: none !important; }
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: var(--swiper-pagination-bullet-opacity, 1);
|
||||
background: var(--swiper-pagination-color, var(--swiper-theme-color)); }
|
||||
|
||||
.swiper-vertical > .swiper-pagination-bullets,
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets {
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translate3d(0px, -50%, 0); }
|
||||
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
|
||||
display: block; }
|
||||
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px; }
|
||||
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
||||
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
display: inline-block;
|
||||
transition: 200ms transform, 200ms top; }
|
||||
|
||||
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); }
|
||||
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap; }
|
||||
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
|
||||
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition: 200ms transform, 200ms left; }
|
||||
|
||||
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
|
||||
transition: 200ms transform, 200ms right; }
|
||||
|
||||
/* Progress */
|
||||
.swiper-pagination-progressbar {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute; }
|
||||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
background: var(--swiper-pagination-color, var(--swiper-theme-color));
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(0);
|
||||
transform-origin: left top; }
|
||||
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||||
transform-origin: right top; }
|
||||
.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
.swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
|
||||
.swiper-pagination-lock {
|
||||
display: none; }
|
||||
|
||||
.item-gallery-edit-container .tainacan-media-component .swiper-slide,
|
||||
.item-gallery-edit-container .tainacan-media-component .swiper-button-prev,
|
||||
.item-gallery-edit-container .tainacan-media-component .swiper-button-next {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -465,7 +465,7 @@ function tainacan_get_the_media_component(
|
|||
|
||||
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['pagination']) ) : ?>
|
||||
<!-- If we need pagination -->
|
||||
<div class="swiper-paginations swiper-pagination_<?php echo esc_attr($args['media_thumbs_id']) ?>"></div>
|
||||
<div class="swiper-pagination swiper-pagination_<?php echo esc_attr($args['media_thumbs_id']) ?>"></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['navigation']) ) : ?>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
@import '../../../../../node_modules/swiper/modules/navigation/navigation.scss';
|
||||
@import '../../../../../node_modules/swiper/modules/a11y/a11y.scss';
|
||||
@import '../../../../../node_modules/swiper/modules/autoplay/autoplay.scss';
|
||||
@import '../../../../../node_modules/swiper/modules/pagination/pagination.scss';
|
||||
|
||||
.item-gallery-edit-container {
|
||||
.tainacan-media-component {
|
||||
|
|
|
|||
|
|
@ -107,7 +107,8 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
|||
lastSlideMessage: __('This is the last slide', 'tainacan')
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination_' + this.main_gallery_selector
|
||||
el: '.swiper-pagination_' + this.main_gallery_selector,
|
||||
clickable: true
|
||||
},
|
||||
modules: [Navigation, A11y, Pagination]
|
||||
};
|
||||
|
|
@ -118,10 +119,20 @@ tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
|||
swiper: this.thumbsSwiper,
|
||||
autoScrollOffset: 3
|
||||
}
|
||||
mainSwiperOptions.modules = [Navigation, A11y, Thumbs];
|
||||
mainSwiperOptions.modules = [Navigation, A11y, Thumbs, Pagination];
|
||||
}
|
||||
|
||||
this.mainSwiper = new Swiper(this.main_gallery_selector, mainSwiperOptions);
|
||||
|
||||
if (this.thumbs_gallery_selector && this.thumbsSwiper && this.mainSwiper) {
|
||||
|
||||
const refToMainSwiper = this.mainSwiper;
|
||||
const refToThumbSwiper = this.thumbsSwiper;
|
||||
|
||||
this.mainSwiper.on('slideChangeTransitionStart', function() {
|
||||
refToThumbSwiper.slideTo(refToMainSwiper.activeIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue