Лагерь: CSS
This commit is contained in:
Dekart Deploy Bot
parent
77e424ca9a
commit
9b44b1ac4e
@ -1606,55 +1606,136 @@ html {
|
||||
}
|
||||
|
||||
/* routine END*/
|
||||
/* foto */
|
||||
.camp-foto-wrapper {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
/* ═══════════════════════════════════════════════
|
||||
GALLERY — lazeweb photo grid + modal
|
||||
═══════════════════════════════════════════════ */
|
||||
.lw-gallery__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.foto-left-part {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
.lw-gallery__item {
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
|
||||
.camp-swiper-foto {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
.lw-gallery__item:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.swiper-button-next:after,
|
||||
.swiper-button-prev:after {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
display: flex;
|
||||
background: #3bb273;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.lw-gallery__thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1665,36 +1746,6 @@ html {
|
||||
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 */
|
||||
|
||||
/* faq */
|
||||
@ -2550,46 +2601,6 @@ html {
|
||||
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 {
|
||||
gap: clamp(20px, 2.5vw, 30px);
|
||||
}
|
||||
@ -2898,29 +2909,6 @@ html {
|
||||
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 {
|
||||
height: 24px;
|
||||
background: #fff;
|
||||
|
||||
@ -1,20 +1,31 @@
|
||||
var swiper = new Swiper(".camp-swiper-foto-thumbsSlider", {
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 7,
|
||||
freeMode: true,
|
||||
watchSlidesVisibility: true,
|
||||
watchSlidesProgress: true,
|
||||
// Gallery modal
|
||||
document.addEventListener('click', function(e) {
|
||||
var thumb = e.target.closest('.lw-gallery__thumb');
|
||||
if (thumb) {
|
||||
var modal = document.getElementById('lw-modal-gallery');
|
||||
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,
|
||||
slidesPerView: 1,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper,
|
||||
},
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
var modal = document.getElementById('lw-modal-gallery');
|
||||
if (modal.classList.contains('lw-modal--open')) {
|
||||
modal.classList.remove('lw-modal--open');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const btnCloseModalPrograms = document.querySelector('.btn-close-programs');
|
||||
|
||||
@ -685,6 +685,7 @@ function add_carbon() {
|
||||
->set_help_text( 'Добавьте реальные фото детей из лагеря. Формат: WebP, 1:1 или 4:3.' )
|
||||
->add_fields( array(
|
||||
Field::make( 'image', 'foto', 'Фотография' )
|
||||
->set_help_text( 'Оптимальный размер: 1200x800px, до 300Кб' ),
|
||||
)),
|
||||
Field::make( 'separator', 'fotos_extra_sep', 'Дополнительно' ),
|
||||
Field::make( 'rich_text', 'fotos_content', 'Текст под галереей' ),
|
||||
|
||||
@ -426,37 +426,39 @@ $metrics = [
|
||||
|
||||
<section class="section-reveal section-bg foto" data-bg="mint">
|
||||
<h2 class="camp_title">Наши фотографии</h2>
|
||||
<div class="camp-foto-wrapper">
|
||||
<?php
|
||||
$fotos = carbon_get_post_meta($post_id, 'fotos' );
|
||||
$fotos_content = carbon_get_post_meta($post_id, 'fotos_content' );
|
||||
$fotos_link_vk = carbon_get_post_meta($post_id, 'fotos_link_vk' );
|
||||
$HTMLimgs = "";
|
||||
if (is_array($fotos)) {
|
||||
foreach ($fotos as $item) {
|
||||
$img = wp_get_attachment_url($item['foto']);
|
||||
$alt = esc_attr(get_post_meta( $item['foto'], '_wp_attachment_image_alt', true ));
|
||||
$HTMLimgs .= "<div class='swiper-slide'>
|
||||
<img loading='lazy' src='" . esc_url($img) . "' alt='$alt' width='560' height='420'>
|
||||
</div>";
|
||||
}
|
||||
} ?>
|
||||
<div class="foto-left-part">
|
||||
<div class="swiper-container camp-swiper-foto">
|
||||
<div class="swiper-wrapper">
|
||||
<?php echo $HTMLimgs; ?>
|
||||
</div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<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>
|
||||
<?php
|
||||
$fotos = carbon_get_post_meta($post_id, 'fotos' );
|
||||
if (is_array($fotos) && !empty($fotos)) :
|
||||
?>
|
||||
<div class="lw-gallery">
|
||||
<div class="lw-gallery__grid">
|
||||
<?php foreach ($fotos as $item) :
|
||||
$img_id = $item['foto'];
|
||||
$img_url = wp_get_attachment_url($img_id);
|
||||
$full_url = wp_get_attachment_image_url($img_id, 'full');
|
||||
$alt = esc_attr(get_post_meta($img_id, '_wp_attachment_image_alt', true));
|
||||
?>
|
||||
<div class="lw-gallery__item">
|
||||
<img class="lw-gallery__thumb"
|
||||
src="<?php echo esc_url($img_url); ?>"
|
||||
alt="<?php echo $alt; ?>"
|
||||
loading="lazy"
|
||||
width="400" height="300"
|
||||
data-full="<?php echo esc_url($full_url); ?>">
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="foto-content"><?php echo esc_html($fotos_content); ?></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 class="section-reveal section-bg camp-reviews" data-bg="white">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user