270 lines
7.9 KiB
PHP
270 lines
7.9 KiB
PHP
<!--popup_wrap-->
|
||
<div id="pop_noti" class="popup_wrap popup-notice" style="display:none">
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.7/swiper-bundle.min.css"
|
||
/>
|
||
<!--popup_in-->
|
||
<div class="popup_in">
|
||
<span class="border-effect"></span>
|
||
<div class="popup_container notice">
|
||
<style>
|
||
|
||
.popup-notice a.link {
|
||
cursor: pointer;
|
||
}
|
||
.popup-notice .swiper-wrapper {
|
||
height: auto !important;
|
||
}
|
||
.popup_container.notice img {
|
||
max-width: 420px;
|
||
}
|
||
.popup-notice .swiper-pagination {
|
||
width: auto;
|
||
right: 8px;
|
||
left: auto;
|
||
padding: 4px 12px;
|
||
border-radius: 25px;
|
||
background: rgba(255,255,255,0.6);
|
||
font-size:14px
|
||
}
|
||
.popup-notice .popupSwiper {
|
||
max-width: 420px; /* 기본: 1280px 미만 */
|
||
}
|
||
|
||
/* PC */
|
||
@media (min-width: 1280px) {
|
||
.popup-notice .popupSwiper {
|
||
max-width:900px;
|
||
}
|
||
.popup-notice .swiper-slide:nth-child(2n) {
|
||
position: relative;
|
||
|
||
}
|
||
.popup-notice .swiper-slide:nth-child(2n):before {
|
||
content:" ";
|
||
position: absolute;
|
||
left: 0;
|
||
top:0;
|
||
width: 1px;height: 100%;
|
||
background:#9E958F;
|
||
}
|
||
.popup-notice .swiper-slide {
|
||
min-width: 450px;
|
||
height: 598px;
|
||
}
|
||
.popup_container.notice img {
|
||
max-width: 450px;
|
||
}
|
||
.popup-notice .swiper-pagination {
|
||
display:none;
|
||
}
|
||
}
|
||
@media (max-width: 721px) {
|
||
.popup_wrap.popup-notice .popup_in ,
|
||
.popup_container.notice img,
|
||
.popup_container.notice img {
|
||
max-width: 320px;
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|
||
<div class="pop-content" >
|
||
<div class="swiper popupSwiper">
|
||
<div class="swiper-wrapper">
|
||
|
||
<?php
|
||
// 오늘 날짜 (Y-m-d 형식)
|
||
$main_today = date('Y-m-d');
|
||
|
||
// 시작일과 종료일
|
||
$mainpop_startDate = '2025-12-01';
|
||
$mainpop_endDate = '2025-12-31';
|
||
// 기간 내에 있으면 배너 표시
|
||
if ($main_today >= $mainpop_startDate && $main_today <= $mainpop_endDate) {
|
||
?>
|
||
<!-- 슬라이드 1 -->
|
||
<div class="swiper-slide">
|
||
<a class="link" href="http://www.ggherald.com/default/index_view_page.php?part_idx=119&idx=74819" target="_blank" alt="‘경기헤럴드’ 기사 전문 바로가기">
|
||
<picture>
|
||
<source
|
||
media="(max-width: 721px)"
|
||
srcset="./img/main_popup/251128_main_popup_m.png?251223"
|
||
/>
|
||
<img
|
||
src="./img/main_popup/251128_main_popup.png"
|
||
alt="EG-BIM X 의왕도시공사 민관 상호 협력 성장 지원을 위한 업무 협약 체결"
|
||
/>
|
||
</picture>
|
||
</a>
|
||
</div>
|
||
<?php
|
||
}
|
||
?>
|
||
<!-- 슬라이드 2 -->
|
||
<div class="swiper-slide">
|
||
<picture>
|
||
<source
|
||
media="(max-width: 721px)"
|
||
srcset="./img/main_popup/251223_main_popup_m.png?251223"
|
||
/>
|
||
<img
|
||
src="./img/main_popup/251223_main_popup.png"
|
||
alt="EG-BIM X 베트남 Nam Can Tho University "
|
||
/>
|
||
</picture>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 페이지네이션 -->
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
</div>
|
||
<div class="btn-wrap">
|
||
<button id="todayClose" type="button">Don’t show again today</button>
|
||
<button id="popupClose" type="button">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--//popup_in-->
|
||
</div>
|
||
<!--//popup_wrap-->
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.7/swiper-bundle.min.js"></script>
|
||
<script>
|
||
(function() {
|
||
// 쿠키 읽기 함수
|
||
function getCookie(name) {
|
||
var value = "; " + document.cookie;
|
||
var parts = value.split("; " + name + "=");
|
||
if (parts.length === 2) return parts.pop().split(";").shift();
|
||
return null;
|
||
}
|
||
|
||
|
||
// 페이지 로드시 쿠키 확인
|
||
var hidePopup = getCookie("hide_popup");
|
||
var today = new Date().toISOString().split('T')[0];
|
||
|
||
var popup = document.getElementById("pop_noti");
|
||
if (!popup) return;
|
||
|
||
// 오늘 날짜와 쿠키 날짜가 같으면 팝업 숨김
|
||
if (hidePopup === today) {
|
||
popup.style.display = "none";
|
||
} else {
|
||
popup.style.display = "block";
|
||
}
|
||
|
||
// 팝업 외부 클릭 시 닫기
|
||
popup.onclick = function(e) {
|
||
if (e.target === popup) {
|
||
popup.style.display = "none";
|
||
}
|
||
};
|
||
|
||
|
||
// 닫기 버튼
|
||
var closeBtn = document.getElementById("popupClose");
|
||
if (closeBtn) {
|
||
closeBtn.onclick = function() {
|
||
popup.style.display = "none";
|
||
};
|
||
}
|
||
|
||
// 오늘 하루 보지 않기 버튼
|
||
var todayChk = document.getElementById("todayClose");
|
||
if (todayChk) {
|
||
todayChk.onclick = function() {
|
||
var today = new Date();
|
||
var expire = new Date();
|
||
expire.setHours(23, 59, 59, 999);
|
||
document.cookie = "hide_popup=" + today.toISOString().split('T')[0] + "; path=/; expires=" + expire.toUTCString();
|
||
popup.style.display = "none";
|
||
};
|
||
}
|
||
|
||
let swiper = null;
|
||
let resizeTimer = null;
|
||
let currentMode = window.innerWidth >= 1280 ? 'pc' : 'mo';
|
||
|
||
function initSwiper() {
|
||
const slideCount = document.querySelectorAll(
|
||
'.popupSwiper .swiper-slide'
|
||
).length;
|
||
|
||
const isSingleSlide = slideCount <= 1;
|
||
const isPC = window.innerWidth >= 1280;
|
||
|
||
swiper = new Swiper('.popupSwiper', {
|
||
speed: 600,
|
||
watchOverflow: true,
|
||
|
||
slidesPerView: isSingleSlide ? 1 : (isPC ? 2 : 1),
|
||
slidesPerGroup: isSingleSlide ? 1 : (isPC ? 2 : 1),
|
||
|
||
loop: false, // ⭐ loop 고정 (중요)
|
||
allowTouchMove: !isPC,
|
||
|
||
observer: true,
|
||
observeParents: true,
|
||
updateOnWindowResize: false,
|
||
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
type: 'fraction',
|
||
},
|
||
|
||
on: {
|
||
init(swiper) {
|
||
// single slide면 pagination 숨김
|
||
if (isSingleSlide && swiper.pagination?.el) {
|
||
swiper.pagination.el.style.display = 'none';
|
||
} else if (swiper.pagination?.el) {
|
||
swiper.pagination.el.style.display = isPC ? 'none' : 'block';
|
||
}
|
||
},
|
||
|
||
// fraction NaN 방어
|
||
paginationUpdate(swiper, el) {
|
||
if (el && el.textContent.includes('NaN')) {
|
||
swiper.slideTo(0, 0, false);
|
||
swiper.update();
|
||
|
||
requestAnimationFrame(() => {
|
||
swiper.pagination.render();
|
||
swiper.pagination.update();
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 최초 실행
|
||
initSwiper();
|
||
|
||
// PC ↔ MO 경계 통과 시에만 재생성
|
||
window.addEventListener('resize', function () {
|
||
clearTimeout(resizeTimer);
|
||
|
||
resizeTimer = setTimeout(() => {
|
||
const newMode = window.innerWidth >= 1280 ? 'pc' : 'mo';
|
||
|
||
if (newMode !== currentMode) {
|
||
currentMode = newMode;
|
||
|
||
if (swiper) {
|
||
swiper.destroy(true, true);
|
||
swiper = null;
|
||
}
|
||
|
||
initSwiper();
|
||
}
|
||
}, 200);
|
||
});
|
||
|
||
})();
|
||
</script>
|