갤러리 리스트에서 이미지크게보기로 보고싶어요
본문
갤러리를 하나 설치했는데
일반적으로는 리스트화면에서 이미지나 제목을 누르면 view페이지로 가고
거기에서 이미지를 누르면 팝업이 뜨면서 "이미지크게보기" 화면이 뜨잖아요
그것을 view페이지 아니고 그냥 리스트화면에서 보여줄수 있을까요?
리스트화면에서 이미지 눌렀을때 이미지크게보기가 나오는 방법을 알려주세요
답변 2
코드를 조금 안다면 view스킨의 원본 이미지 보기를 활용하면 간단 합니다만
다음처럼 하세요
1. for문 다음에 넣으세요
$list[$i]['href']="view_image.php?bo_table=$bo_table&fn={$list[$i]['file'][0]['file']}";
2. 하단 자바스크립트 부분에 넣으세요
$(".gall_img a").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
3 목록에서 화일사용 체크
아래의 코드도 한번 참고를 해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>갤러리 리스트 이미지 크게보기</title>
<style>
/* 기본 스타일 */
body {
font-family: 'Malgun Gothic', sans-serif;
margin: 0;
padding: 20px;
}
.gallery-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.gallery-item {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 150px;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s;
}
.gallery-item img:hover {
transform: scale(1.05);
}
.gallery-title {
padding: 10px;
font-size: 14px;
text-align: center;
}
/* 라이트박스 스타일 */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-image {
max-width: 100%;
max-height: 90vh;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close-lightbox {
position: absolute;
top: -30px;
right: 0;
color: white;
font-size: 24px;
cursor: pointer;
}
@media (max-width: 768px) {
.gallery-list {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>
</head>
<body>
<h2>갤러리 리스트</h2>
<div class="gallery-list">
<!-- 갤러리 아이템 -->
<div class="gallery-item">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='18' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3E이미지 1%3C/text%3E%3C/svg%3E" alt="갤러리 이미지 1" class="gallery-image">
<div class="gallery-title">첫 번째 이미지 제목</div>
</div>
<div class="gallery-item">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23e0e0e0'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='18' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3E이미지 2%3C/text%3E%3C/svg%3E" alt="갤러리 이미지 2" class="gallery-image">
<div class="gallery-title">두 번째 이미지 제목</div>
</div>
<div class="gallery-item">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23d0d0d0'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='18' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3E이미지 3%3C/text%3E%3C/svg%3E" alt="갤러리 이미지 3" class="gallery-image">
<div class="gallery-title">세 번째 이미지 제목</div>
</div>
<div class="gallery-item">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23c0c0c0'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='18' text-anchor='middle' dominant-baseline='middle' fill='%23999'%3E이미지 4%3C/text%3E%3C/svg%3E" alt="갤러리 이미지 4" class="gallery-image">
<div class="gallery-title">네 번째 이미지 제목</div>
</div>
</div>
<!-- 라이트박스 -->
<div class="lightbox" id="lightbox">
<div class="lightbox-content">
<span class="close-lightbox" id="close-lightbox">×</span>
<img src="" alt="큰 이미지" class="lightbox-image" id="lightbox-image">
</div>
</div>
<script>
// 갤러리 이미지 클릭 시 라이트박스 활성화
const galleryImages = document.querySelectorAll('.gallery-image');
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightbox-image');
const closeLightbox = document.getElementById('close-lightbox');
galleryImages.forEach(image => {
image.addEventListener('click', function() {
lightboxImage.src = this.src;
lightbox.classList.add('active');
});
});
// 라이트박스 닫기
closeLightbox.addEventListener('click', function() {
lightbox.classList.remove('active');
});
// 라이트박스 바깥 영역 클릭 시 닫기
lightbox.addEventListener('click', function(e) {
if (e.target === lightbox) {
lightbox.classList.remove('active');
}
});
// ESC 키 누르면 라이트박스 닫기
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
lightbox.classList.remove('active');
}
});
</script>
</body>
</html>