.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“); } } }); });