최초 커밋
This commit is contained in:
root
@@ -0,0 +1,270 @@
|
||||
<!--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>
|
||||
Reference in New Issue
Block a user