first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,168 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user