Как изменить размер изображений, используемых в моей всплывающей функции? ⇐ CSS

[Anonymous]

В настоящее время я работаю на веб -сайте группы для школы и хотел бы помощь в отношении галереи изображений. Я использую всплывающую функцию, которая поднимает макет галереи, когда вы нажимаете на одну из карт (как показано ниже):
Введите описание изображения здесь < /p>
Проблема, с которой мне нужна помощь,-это увеличение изображения; Когда вы нажимаете на карту, чтобы просмотреть, она слишком квадрата /маленькая, чтобы вы могли увидеть.
Введите описание изображения здесь < /p>
Я попытался добавить стиль CSS, который был предназначен для увеличения размера этих расширений,. Lightbox-Img и .lightbox-Video, но ничего не изменилось; См. Полный сценарий ниже для полного контекста. < /p>




My Template




/* Scoped gallery flexbox */
.gallery-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
align-items: flex-start;
padding: 32px;
}

/* Column container: stacks cards vertically */
.gallery-column {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 320px;
align-items: center;
}

/* Minimal card styles */
.gallery-card {
width: 300px;
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .18s ease, box-shadow .18s ease;
cursor: pointer;
}
.gallery-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.gallery-card .card-image {
height: 180px;
background-size: cover;
background-position: center;
}
.gallery-card .card-body {
padding: 16px;
display:flex;
flex-direction:column;
gap:8px;
}
.gallery-card .card-title { font-size: 18px; margin:0; }
.gallery-card .card-meta { color:#888; font-size:13px; }

/* Popup modal */
.popup {
display: none;
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
overflow-y: auto;
padding: 40px;
}

.popup-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}

.popup-content img, .popup-content video {
width: 100%;
cursor: pointer;
border-radius: 8px;
}

/* Enlarged lightbox */
.lightbox {
display: none;
position: fixed;
z-index: 2000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
}

.lightbox-img, .lightbox-video {
max-width: 90%;
max-height: 180%;
}

.close, .close-lightbox {
position: absolute;
top: 20px;
right: 30px;
font-size: 2rem;
color: white;
cursor: pointer;
}

.close-popup-alt {
right: auto; /* override */
left: 30px; /* put it on the left */
}







Schedule




Gallery
Tickets
Contacts













// Example gallery data
const galleries = {
gallery1: [
{ type: "image", src: "images/526799260_17913770088173624_4992596152008236443_n.jpg" },
{ type: "image", src: "images/527217532_17913770139173624_3447902418708470496_n.jpg" },
{ type: "image", src: "images/527347868_17913770100173624_5364842354706412001_n.jpg" },
{ type: "image", src: "images/20250801_204345.jpg" },
{ type: "image", src: "images/527459390_17913770154173624_2226161759858261791_n.jpg" },
{ type: "image", src: "images/527602790_17913770109173624_3383356135291669897_n.jpg" },
{ type: "image", src: "images/20250801_221401.jpg" }
],
gallery2: [
{ type: "image", src: "images/494991235_18286765729301527_7275334930415546728_n.jpg" },
{ type: "video", src: "videos/sample.mp4" }
],
gallery3: [
{ type: "image", src: "images/494991235_18286765729301527_7275334930415546728_n.jpg" },
{ type: "video", src: "videos/sample.mp4" }
]
,
gallery4: [
{ type: "image", src: "images/494991235_18286765729301527_7275334930415546728_n.jpg" },
{ type: "video", src: "videos/sample.mp4" }
],

gallery5: [
{ type: "image", src: "images/494991235_18286765729301527_7275334930415546728_n.jpg" },
{ type: "video", src: "videos/sample.mp4" }
]
,
gallery6: [
{ type: "image", src: "images/494991235_18286765729301527_7275334930415546728_n.jpg" },
{ type: "video", src: "videos/sample.mp4" }
]

};

const popup = document.getElementById("popup");
const popupContent = document.querySelector(".popup-content");
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightbox-img");
const lightboxVideo = document.getElementById("lightbox-video");

// Open popup on card click
document.querySelectorAll(".gallery-card").forEach(card => {
card.addEventListener("click", () => {
const galleryId = card.dataset.gallery;
openGallery(galleryId);
});
});

// Close popup (both buttons)
document.querySelectorAll(".close, .close-popup-alt").forEach(btn => {
btn.onclick = () => popup.style.display = "none";
});

// Close lightbox
document.querySelector(".close-lightbox").onclick = () => lightbox.style.display = "none";

function openGallery(id) {
popupContent.innerHTML = ""; // clear previous
galleries[id].forEach(item => {
let el;
if (item.type === "image") {
el = document.createElement("img");
el.src = item.src;
} else {
el = document.createElement("video");
el.src = item.src;
el.controls = true;
}
el.addEventListener("click", () => openLightbox(item));
popupContent.appendChild(el);
});
popup.style.display = "block";
}

// Open lightbox (enlarged)
function openLightbox(item) {
lightbox.style.display = "flex";
if (item.type === "image") {
lightboxImg.src = item.src;
lightboxImg.style.display = "block";
lightboxVideo.style.display = "none";
} else {
lightboxVideo.src = item.src;
lightboxVideo.style.display = "block";
lightboxImg.style.display = "none";
}
}

// Close buttons
document.querySelector(".close").onclick = () => popup.style.display = "none";
document.querySelector(".close-lightbox").onclick = () => lightbox.style.display = "none";







Подробнее здесь: https://stackoverflow.com/questions/797 ... p-function