답변 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>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인