hmw1001
169 lines
6.9 KiB
PHP
169 lines
6.9 KiB
PHP
<?php
|
|
if (!defined('_GNUBOARD_')) exit;
|
|
|
|
// --- 설정 변수 ---
|
|
$bo_table = 'main_visual'; // 실제 생성하신 게시판 테이블명으로 수정하세요
|
|
$limit_count = 10; // 불러올 슬라이드 개수 (변수 처리)
|
|
$write_table = $g5['write_prefix'] . $bo_table;
|
|
|
|
// 데이터베이스에서 데이터 가져오기 (wr_id 역순)
|
|
// wr_is_comment = 0 : 댓글 제외
|
|
$sql = " SELECT * FROM {$write_table}
|
|
WHERE wr_is_comment = 0
|
|
ORDER BY wr_num, wr_reply LIMIT 0, {$limit_count} ";
|
|
$result = sql_query($sql);
|
|
|
|
$module_id = 'pns_visual_' . uniqid();
|
|
?>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
|
<div id="<?php echo $module_id; ?>" class="pns-visual-slider swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<?php
|
|
for ($i=0; $row=sql_fetch_array($result); $i++) {
|
|
// 💡 [수정] 썸네일 대신 원본 이미지 가져오기
|
|
// 게시판 파일 테이블에서 첫 번째 첨부파일 조회
|
|
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '$bo_table' and wr_id = '{$row['wr_id']}' order by bf_no limit 1 ";
|
|
$row_file = sql_fetch($sql_file);
|
|
|
|
if ($row_file['bf_file']) {
|
|
$img_url = G5_DATA_URL.'/file/'.$bo_table.'/'.$row_file['bf_file'];
|
|
} else {
|
|
// 첨부파일이 없으면 에디터 이미지 추출 (선택 사항)
|
|
$img_url = G5_THEME_URL.'/rb.img/no_image.png';
|
|
}
|
|
|
|
// 제목과 요약 내용 (wr_subject, wr_1)
|
|
$subject = cut_str(get_text($row['wr_subject']), 100);
|
|
$summary = get_text($row['wr_1']); // wr_1에 저장된 요약 내용
|
|
?>
|
|
<div class="swiper-slide">
|
|
<div class="visual-bg" style="background-image: url('<?php echo $img_url; ?>');"></div>
|
|
<div class="visual-content container">
|
|
<h2 class="visual-title" data-swiper-parallax="-300"><?php echo nl2br($subject); ?></h2>
|
|
<p class="visual-desc" data-swiper-parallax="-200"><?php echo nl2br($summary); ?></p>
|
|
<!-- 💡 [수정] href를 자바스크립트 호출로 변경하고 클래스 추가 -->
|
|
<a href="javascript:void(0);" class="visual-btn btn-open-lightbox" data-img="<?php echo $img_url; ?>" data-swiper-parallax="-100">자세히 보기</a>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
|
|
<?php if($i == 0) echo '<div class="swiper-slide"><div class="visual-content">등록된 광고 데이터가 없습니다.</div></div>'; ?>
|
|
</div>
|
|
|
|
<div class="swiper-pagination"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
|
|
<!-- 💡 [추가] 이미지 라이트박스 컨테이너 -->
|
|
<div id="image-lightbox" class="image-lightbox">
|
|
<span class="lightbox-close">×</span>
|
|
<img class="lightbox-content" id="lightbox-img">
|
|
</div>
|
|
|
|
<style>
|
|
/* 기존 스타일 유지하되 글자 가독성을 위해 그림자 추가 */
|
|
.pns-visual-slider { width: 100%; height: 80vh; min-height: 500px; position: relative; overflow: hidden; background: #000; }
|
|
.visual-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 7s; }
|
|
.swiper-slide-active .visual-bg { transform: scale(1.1); } /* 미세한 줌 효과 */
|
|
.visual-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); }
|
|
.visual-content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; padding: 0 10%; }
|
|
.visual-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; word-break: keep-all; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
|
|
.visual-desc { font-size: 1.3rem; line-height: 1.6; margin-bottom: 40px; font-weight: 300; opacity: 0.9; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); }
|
|
.visual-btn { display: inline-block; padding: 15px 45px; border: 2px solid #fff; color: #fff; text-decoration: none; font-size: 1rem; transition: 0.3s; width: fit-content; cursor: pointer; }
|
|
.visual-btn:hover { background: #fff; color: #000; }
|
|
|
|
/* 💡 [추가] 라이트박스 스타일 */
|
|
.image-lightbox {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.85); /* 배경 어둡게 */
|
|
justify-content: center;
|
|
align-items: center;
|
|
animation: fadeIn 0.3s;
|
|
}
|
|
|
|
.lightbox-content {
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
object-fit: contain;
|
|
animation: zoomIn 0.3s;
|
|
}
|
|
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 40px;
|
|
color: #fff;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lightbox-close:hover {
|
|
color: #bbb;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
from { transform: scale(0.8); }
|
|
to { transform: scale(1); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.visual-title { font-size: 2rem; }
|
|
.visual-desc { font-size: 1rem; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var swiper = new Swiper('#<?php echo $module_id; ?>', {
|
|
speed: 1200,
|
|
parallax: true,
|
|
loop: true,
|
|
autoplay: { delay: 6000, disableOnInteraction: false },
|
|
pagination: { el: '.swiper-pagination', clickable: true },
|
|
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
|
|
});
|
|
|
|
// 💡 [추가] 라이트박스 제어 스크립트
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var lightbox = document.getElementById('image-lightbox');
|
|
var lightboxImg = document.getElementById('lightbox-img');
|
|
var closeBtn = document.querySelector('.lightbox-close');
|
|
|
|
// 동적으로 생성된 요소에도 이벤트 바인딩 (이벤트 위임)
|
|
document.body.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('btn-open-lightbox')) {
|
|
e.preventDefault();
|
|
var imgSrc = e.target.getAttribute('data-img');
|
|
lightboxImg.src = imgSrc;
|
|
lightbox.style.display = 'flex';
|
|
}
|
|
});
|
|
|
|
closeBtn.addEventListener('click', function() {
|
|
lightbox.style.display = 'none';
|
|
});
|
|
|
|
lightbox.addEventListener('click', function(e) {
|
|
if (e.target === lightbox) {
|
|
lightbox.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|