Лагерь: CSS
This commit is contained in:
Dekart Deploy Bot
parent
77e424ca9a
commit
9b44b1ac4e
@ -1606,55 +1606,136 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* routine END*/
|
/* routine END*/
|
||||||
/* foto */
|
/* ═══════════════════════════════════════════════
|
||||||
.camp-foto-wrapper {
|
GALLERY — lazeweb photo grid + modal
|
||||||
display: flex;
|
═══════════════════════════════════════════════ */
|
||||||
gap: 20px;
|
.lw-gallery__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.foto-left-part {
|
.lw-gallery__item {
|
||||||
width: 50%;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
border-radius: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-swiper-foto {
|
.lw-gallery__item:hover {
|
||||||
position: relative;
|
transform: scale(1.02);
|
||||||
margin-bottom: 5px;
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-button-next:after,
|
.lw-gallery__thumb {
|
||||||
.swiper-button-prev:after {
|
width: 100%;
|
||||||
color: #fff;
|
height: 100%;
|
||||||
font-weight: 600;
|
object-fit: cover;
|
||||||
font-size: 14px;
|
display: block;
|
||||||
padding: 5px;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 28px;
|
|
||||||
width: 28px;
|
|
||||||
display: flex;
|
|
||||||
background: #3bb273;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* swiper */
|
.lw-modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 99999;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-modal--open {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-modal__overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-modal__content {
|
||||||
|
position: relative;
|
||||||
|
max-width: 90vw;
|
||||||
|
max-height: 90vh;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-modal__img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 90vh;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-modal__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 2;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-modal__close:hover {
|
||||||
|
background: rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.lw-gallery__grid {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
overflow-x: auto;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-gallery__grid::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-gallery__grid::-webkit-scrollbar-thumb {
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lw-gallery__item {
|
||||||
|
flex: 0 0 280px;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.lw-gallery__item {
|
||||||
|
flex: 0 0 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* swiper (base — used by reviews) */
|
||||||
.swiper-slide {
|
.swiper-slide {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
/* Center slide text vertically */
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1665,36 +1746,6 @@ html {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-swiper-foto {
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto img {
|
|
||||||
border-radius: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto-thumbsSlider {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto-thumbsSlider img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: .2s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto-thumbsSlider img:hover {
|
|
||||||
opacity: .6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.foto-content {
|
|
||||||
width: calc(50% - 20px);
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* swiper END */
|
/* swiper END */
|
||||||
|
|
||||||
/* faq */
|
/* faq */
|
||||||
@ -2550,46 +2601,6 @@ html {
|
|||||||
font-size: clamp(12px, 1.5vw, 18px);
|
font-size: clamp(12px, 1.5vw, 18px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-foto-wrapper {
|
|
||||||
gap: clamp(13px, 1.67vw, 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto {
|
|
||||||
margin-bottom: clamp(3px, .42vw, 5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-button-next:after,
|
|
||||||
.swiper-button-prev:after {
|
|
||||||
font-size: clamp(9px, 1.17vw, 14px);
|
|
||||||
padding: clamp(3px, .42vw, 5px);
|
|
||||||
height: clamp(18px, 2.33vw, 28px);
|
|
||||||
width: clamp(18px, 2.33vw, 28px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide {
|
|
||||||
font-size: clamp(12px, 1.5vw, 18px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto {
|
|
||||||
height: clamp(228px, 29.17vw, 350px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto img {
|
|
||||||
border-radius: clamp(20px, 2.5vw, 30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto-thumbsSlider {
|
|
||||||
height: clamp(52px, 6.67vw, 80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto-thumbsSlider img {
|
|
||||||
border-radius: clamp(6px, .83vw, 10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.foto-content {
|
|
||||||
width: calc(50% - clamp(13px, 1.67vw, 20px));
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-wrapper {
|
.faq-wrapper {
|
||||||
gap: clamp(20px, 2.5vw, 30px);
|
gap: clamp(20px, 2.5vw, 30px);
|
||||||
}
|
}
|
||||||
@ -2898,29 +2909,6 @@ html {
|
|||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.camp-foto-wrapper {
|
|
||||||
gap: 10px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.foto-content,
|
|
||||||
.foto-left-part {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto {
|
|
||||||
height: 250px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.camp-swiper-foto-thumbsSlider {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.foto-content {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more .btn-more {
|
.more .btn-more {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
@ -1,20 +1,31 @@
|
|||||||
var swiper = new Swiper(".camp-swiper-foto-thumbsSlider", {
|
// Gallery modal
|
||||||
spaceBetween: 10,
|
document.addEventListener('click', function(e) {
|
||||||
slidesPerView: 7,
|
var thumb = e.target.closest('.lw-gallery__thumb');
|
||||||
freeMode: true,
|
if (thumb) {
|
||||||
watchSlidesVisibility: true,
|
var modal = document.getElementById('lw-modal-gallery');
|
||||||
watchSlidesProgress: true,
|
var img = modal.querySelector('.lw-modal__img');
|
||||||
|
img.src = thumb.dataset.full;
|
||||||
|
modal.classList.add('lw-modal--open');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var close = e.target.closest('.lw-modal__close, .lw-modal__overlay');
|
||||||
|
if (close) {
|
||||||
|
var modal = document.getElementById('lw-modal-gallery');
|
||||||
|
modal.classList.remove('lw-modal--open');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
var swiper2 = new Swiper(".camp-swiper-foto", {
|
|
||||||
spaceBetween: 10,
|
document.addEventListener('keydown', function(e) {
|
||||||
slidesPerView: 1,
|
if (e.key === 'Escape') {
|
||||||
navigation: {
|
var modal = document.getElementById('lw-modal-gallery');
|
||||||
nextEl: ".swiper-button-next",
|
if (modal.classList.contains('lw-modal--open')) {
|
||||||
prevEl: ".swiper-button-prev",
|
modal.classList.remove('lw-modal--open');
|
||||||
},
|
document.body.style.overflow = '';
|
||||||
thumbs: {
|
}
|
||||||
swiper: swiper,
|
}
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const btnCloseModalPrograms = document.querySelector('.btn-close-programs');
|
const btnCloseModalPrograms = document.querySelector('.btn-close-programs');
|
||||||
|
|||||||
@ -685,6 +685,7 @@ function add_carbon() {
|
|||||||
->set_help_text( 'Добавьте реальные фото детей из лагеря. Формат: WebP, 1:1 или 4:3.' )
|
->set_help_text( 'Добавьте реальные фото детей из лагеря. Формат: WebP, 1:1 или 4:3.' )
|
||||||
->add_fields( array(
|
->add_fields( array(
|
||||||
Field::make( 'image', 'foto', 'Фотография' )
|
Field::make( 'image', 'foto', 'Фотография' )
|
||||||
|
->set_help_text( 'Оптимальный размер: 1200x800px, до 300Кб' ),
|
||||||
)),
|
)),
|
||||||
Field::make( 'separator', 'fotos_extra_sep', 'Дополнительно' ),
|
Field::make( 'separator', 'fotos_extra_sep', 'Дополнительно' ),
|
||||||
Field::make( 'rich_text', 'fotos_content', 'Текст под галереей' ),
|
Field::make( 'rich_text', 'fotos_content', 'Текст под галереей' ),
|
||||||
|
|||||||
@ -426,37 +426,39 @@ $metrics = [
|
|||||||
|
|
||||||
<section class="section-reveal section-bg foto" data-bg="mint">
|
<section class="section-reveal section-bg foto" data-bg="mint">
|
||||||
<h2 class="camp_title">Наши фотографии</h2>
|
<h2 class="camp_title">Наши фотографии</h2>
|
||||||
<div class="camp-foto-wrapper">
|
<?php
|
||||||
<?php
|
$fotos = carbon_get_post_meta($post_id, 'fotos' );
|
||||||
$fotos = carbon_get_post_meta($post_id, 'fotos' );
|
if (is_array($fotos) && !empty($fotos)) :
|
||||||
$fotos_content = carbon_get_post_meta($post_id, 'fotos_content' );
|
?>
|
||||||
$fotos_link_vk = carbon_get_post_meta($post_id, 'fotos_link_vk' );
|
<div class="lw-gallery">
|
||||||
$HTMLimgs = "";
|
<div class="lw-gallery__grid">
|
||||||
if (is_array($fotos)) {
|
<?php foreach ($fotos as $item) :
|
||||||
foreach ($fotos as $item) {
|
$img_id = $item['foto'];
|
||||||
$img = wp_get_attachment_url($item['foto']);
|
$img_url = wp_get_attachment_url($img_id);
|
||||||
$alt = esc_attr(get_post_meta( $item['foto'], '_wp_attachment_image_alt', true ));
|
$full_url = wp_get_attachment_image_url($img_id, 'full');
|
||||||
$HTMLimgs .= "<div class='swiper-slide'>
|
$alt = esc_attr(get_post_meta($img_id, '_wp_attachment_image_alt', true));
|
||||||
<img loading='lazy' src='" . esc_url($img) . "' alt='$alt' width='560' height='420'>
|
?>
|
||||||
</div>";
|
<div class="lw-gallery__item">
|
||||||
}
|
<img class="lw-gallery__thumb"
|
||||||
} ?>
|
src="<?php echo esc_url($img_url); ?>"
|
||||||
<div class="foto-left-part">
|
alt="<?php echo $alt; ?>"
|
||||||
<div class="swiper-container camp-swiper-foto">
|
loading="lazy"
|
||||||
<div class="swiper-wrapper">
|
width="400" height="300"
|
||||||
<?php echo $HTMLimgs; ?>
|
data-full="<?php echo esc_url($full_url); ?>">
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-button-next"></div>
|
<?php endforeach; ?>
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
</div>
|
|
||||||
<div thumbsSlider="" class="swiper-container camp-swiper-foto-thumbsSlider">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<?php echo $HTMLimgs; ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="foto-content"><?php echo esc_html($fotos_content); ?></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="lw-modal" id="lw-modal-gallery" role="dialog" aria-modal="true" aria-label="Просмотр фото">
|
||||||
|
<div class="lw-modal__overlay"></div>
|
||||||
|
<div class="lw-modal__content">
|
||||||
|
<button class="lw-modal__close" aria-label="Закрыть">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
|
||||||
|
</button>
|
||||||
|
<img class="lw-modal__img" src="" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section-reveal section-bg camp-reviews" data-bg="white">
|
<section class="section-reveal section-bg camp-reviews" data-bg="white">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user