Fix : 모바일 뷰잉 패치
This commit is contained in:
KINDNICK
parent
c22b68047d
commit
f8908635b6
64
index.html
64
index.html
@ -280,7 +280,7 @@
|
||||
<h2>스튜디오 공간 갤러리</h2>
|
||||
<p>밍글 스튜디오의 실제 공간을 사진으로 확인해보세요. 이미지를 클릭하면 크게 볼 수 있습니다.</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;">
|
||||
<div class="gallery-grid">
|
||||
<div class="studio-img-card">
|
||||
<img src="Studio_Image/넓은 모션 캡쳐 공간 001.jpg" alt="메인 모션캡쳐 존(전경)" class="studio-img-thumb">
|
||||
<div class="studio-img-caption">메인 모션캡쳐 존(전경)</div>
|
||||
@ -342,20 +342,64 @@
|
||||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
</style>
|
||||
<script>
|
||||
// 라이트박스 기능
|
||||
// 라이트박스 기능 (이미지 넘기기 지원)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.studio-img-thumb').forEach(function(img) {
|
||||
// 갤러리 이미지 정보 배열 생성
|
||||
const galleryImages = Array.from(document.querySelectorAll('.studio-img-thumb')).map(img => ({
|
||||
src: img.getAttribute('src'),
|
||||
alt: img.getAttribute('alt'),
|
||||
caption: img.parentElement.querySelector('.studio-img-caption')?.textContent || ''
|
||||
}));
|
||||
|
||||
document.querySelectorAll('.studio-img-thumb').forEach(function(img, idx) {
|
||||
img.addEventListener('click', function() {
|
||||
const src = img.getAttribute('src');
|
||||
const alt = img.getAttribute('alt');
|
||||
openLightbox(idx);
|
||||
});
|
||||
});
|
||||
|
||||
function openLightbox(startIdx) {
|
||||
let currentIdx = startIdx;
|
||||
const lightboxBg = document.createElement('div');
|
||||
lightboxBg.className = 'lightbox-bg';
|
||||
lightboxBg.innerHTML = `<span class='lightbox-close'>×</span><img src='${src}' alt='${alt}' class='lightbox-img'>`;
|
||||
renderLightboxContent();
|
||||
document.body.appendChild(lightboxBg);
|
||||
lightboxBg.querySelector('.lightbox-close').onclick = () => lightboxBg.remove();
|
||||
lightboxBg.onclick = (e) => { if(e.target === lightboxBg) lightboxBg.remove(); };
|
||||
});
|
||||
});
|
||||
|
||||
function renderLightboxContent() {
|
||||
lightboxBg.innerHTML = `
|
||||
<span class='lightbox-close'>×</span>
|
||||
<button class='lightbox-arrow lightbox-prev'>❮</button>
|
||||
<div class='lightbox-img-wrap'>
|
||||
<img src='${galleryImages[currentIdx].src}' alt='${galleryImages[currentIdx].alt}' class='lightbox-img'>
|
||||
<div class='lightbox-caption'>${galleryImages[currentIdx].caption}</div>
|
||||
</div>
|
||||
<button class='lightbox-arrow lightbox-next'>❯</button>
|
||||
`;
|
||||
lightboxBg.querySelector('.lightbox-close').onclick = closeLightbox;
|
||||
lightboxBg.querySelector('.lightbox-prev').onclick = showPrev;
|
||||
lightboxBg.querySelector('.lightbox-next').onclick = showNext;
|
||||
lightboxBg.onclick = (e) => { if(e.target === lightboxBg) closeLightbox(); };
|
||||
document.addEventListener('keydown', keyHandler);
|
||||
}
|
||||
function showPrev(e) {
|
||||
e && e.stopPropagation();
|
||||
currentIdx = (currentIdx - 1 + galleryImages.length) % galleryImages.length;
|
||||
renderLightboxContent();
|
||||
}
|
||||
function showNext(e) {
|
||||
e && e.stopPropagation();
|
||||
currentIdx = (currentIdx + 1) % galleryImages.length;
|
||||
renderLightboxContent();
|
||||
}
|
||||
function closeLightbox() {
|
||||
document.removeEventListener('keydown', keyHandler);
|
||||
lightboxBg.remove();
|
||||
}
|
||||
function keyHandler(e) {
|
||||
if (e.key === 'ArrowLeft') showPrev();
|
||||
if (e.key === 'ArrowRight') showNext();
|
||||
if (e.key === 'Escape') closeLightbox();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
70
styles.css
70
styles.css
@ -603,6 +603,68 @@ section {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* 갤러리 그리드 */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* 라이트박스 화살표 버튼 스타일 */
|
||||
.lightbox-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: none;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 50%;
|
||||
font-size: 2.2rem;
|
||||
color: #ff8800;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10001;
|
||||
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
|
||||
outline: none;
|
||||
}
|
||||
.lightbox-arrow:hover, .lightbox-arrow:focus {
|
||||
background: #ff8800;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 32px rgba(255,136,0,0.18);
|
||||
}
|
||||
.lightbox-prev {
|
||||
left: 3vw;
|
||||
}
|
||||
.lightbox-next {
|
||||
right: 3vw;
|
||||
}
|
||||
|
||||
.lightbox-caption {
|
||||
margin-top: 1.2rem;
|
||||
color: #222;
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 10px;
|
||||
padding: 0.7rem 1.5rem;
|
||||
font-size: 1.13rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
position: relative;
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
.lightbox-img-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 768px) {
|
||||
.hamburger {
|
||||
@ -657,6 +719,10 @@ section {
|
||||
.portfolio-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@ -672,4 +738,8 @@ section {
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user