.custom-arrow {
font-size: 0 !important;
}
.custom-arrow:before {
font-size: 42px !important;
}
.gallery-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9998;
}
.gallery-popup {
display: none;
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 90%;
overflow: hidden;
}
.gallery-popup-content {
background-color: #fff;
padding: 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
}
.gallery-close {
position: absolute;
top: 20px;
right: 20px;
z-index: 99999;
font-size: 30px;
cursor: pointer;
background: #F36A10;
color: #fff;
padding: 8px 17px;
line-height: 1;
}
.gallery-main-slider,
.gallery-nav-slider {
width: 100%;
max-width: 100%;
margin: auto;
}
.gallery-main-slider .slick-slide img {
display: block;
width: auto;
max-width: 100%;
height: 70vh;
margin: auto;
object-fit: contain;
}
.gallery-thumbnail {
height: 10vh;
width: 100%;
object-fit: cover;
cursor: pointer;
padding: 5px;
}
.gallery-nav-slider {
margin-top: 10px;
}
.gallery-main-slider .slick-prev,
.gallery-main-slider .slick-next {
z-index: 999;
}
.gallery-main-slider .slick-prev,
.gallery-main-slider .slick-next {
width: 60px;
height: 60px;
z-index: 9999;
position:absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.45);
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
transition: 0.2s ease;
}
.gallery-main-slider .slick-prev:hover,
.gallery-main-slider .slick-next:hover {
background: rgba(0,0,0,0.75);
}
.gallery-main-slider .slick-prev {
left:0px;
}
.gallery-main-slider .slick-next {
right: 0px;
}
.gallery-main-slider .slick-prev:before,
.gallery-main-slider .slick-next:before {
font-family: ‚slick‘;
font-size: 42px !important;
color: white !important;
background: transparent !important;
padding: 0 !important;
opacity: 1 !important;
}
.gallery-main-slider .slick-prev:before {
content: „←“;
}
.gallery-main-slider .slick-next:before {
content: „→“;
}
.gallery-nav-slider .slick-prev,
.gallery-nav-slider .slick-next {
display: none !important;
}
.popup-open #masthead {
display: none;
}
body.popup-open {
overflow: hidden;
height: 100vh;
}
.first-three-images {
display: flex;
flex-direction: column;
gap: 10px;
}
.first-three-images img {
width: 100%;
height: auto;
object-fit: cover;
}
@media (max-width: 768px) {
.gallery-main-slider .slick-prev {
left: 10px;
}
.gallery-main-slider .slick-next {
right: 10px;
}
.gallery-main-slider .slick-prev,
.gallery-main-slider .slick-next {
width: 45px;
height: 45px;
}
.gallery-main-slider .slick-prev:before,
.gallery-main-slider .slick-next:before {
font-size: 28px !important;
}
.gallery-popup {
width: 100%;
height: 100%;
}
.gallery-popup-content {
padding: 10px;
}
.gallery-main-slider .slick-slide img {
width: 100%;
height: auto;
aspect-ratio: 7 / 9;
object-fit: cover;
}
.gallery-thumbnail {
height: 8vh;
}
.gallery-close {
top: 10px;
right: 10px;
font-size: 22px;
}
.first-three-images {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.first-three-images img {
width: calc(50% – 4px);
aspect-ratio: 7 / 6;
object-fit: cover;
}
.first-three-images img:nth-child(3) {
display: none;
}
}
jQuery(document).ready(function($) {
function openGalleryPopup() {
if (typeof $.fn.slick === „undefined“) {
console.error(„Slick slider nie je načítaný.“);
return;
}
$(„#galleryOverlay“).fadeIn(150);
$(„#galleryPopup“).fadeIn(150);
$(„body“).addClass(„popup-open“);
$(„html“).addClass(„popup-open“);
const mainSlider = $(„#main-slider“);
const navSlider = $(„#nav-slider“);
if (!mainSlider.hasClass(„slick-initialized“)) {
mainSlider.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
adaptiveHeight: false,
asNavFor: „#nav-slider“,
prevArrow: ‚
‚,
nextArrow: ‚
‚
});
}
if (!navSlider.hasClass(„slick-initialized“)) {
navSlider.slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: „#main-slider“,
dots: false,
arrows: false,
centerMode: true,
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
}
]
});
}
setTimeout(function() {
mainSlider.slick(„setPosition“);
navSlider.slick(„setPosition“);
}, 200);
}
function closeGalleryPopup() {
$(„#galleryOverlay“).fadeOut(150);
$(„#galleryPopup“).fadeOut(150);
$(„body“).removeClass(„popup-open“);
$(„html“).removeClass(„popup-open“);
}
$(„.js-open-gallery-popup“).on(„click“, function() {
openGalleryPopup();
});
$(„#show-more-btn“).on(„click“, function(e) {
e.preventDefault();
openGalleryPopup();
});
$(„.gallery-close, #galleryOverlay“).on(„click“, function() {
closeGalleryPopup();
});
$(document).on(„keydown“, function(event) {
const mainSlider = $(„#main-slider“);
if (event.key === „Escape“) {
closeGalleryPopup();
}
if (mainSlider.hasClass(„slick-initialized“)) {
if (event.key === „ArrowLeft“) {
mainSlider.slick(„slickPrev“);
}
if (event.key === „ArrowRight“) {
mainSlider.slick(„slickNext“);
}
}
});
});
