727 lines
32 KiB
JavaScript
727 lines
32 KiB
JavaScript
/************************************************
|
|
* 초기화
|
|
************************************************/
|
|
function fn_init() {
|
|
//팝업
|
|
fn_selectListWebPopupJson();
|
|
//인스타그램 리스트
|
|
fn_selectListWebInstagramJson();
|
|
|
|
//상단, 하단 배너
|
|
fn_selectListWebMainBannerTypeAJson();
|
|
fn_selectListWebMainBannerTypeBJson();
|
|
}
|
|
|
|
/************************************************
|
|
* 팝업 마스킹 관련 함수들 (새로 추가)
|
|
************************************************/
|
|
|
|
// 배경 마스킹 표시
|
|
function showBackgroundMask() {
|
|
const mask = document.querySelector('.popup-background-mask');
|
|
if (mask) {
|
|
mask.classList.add('active');
|
|
}
|
|
|
|
// body에 popup-open 클래스 추가 (스크롤 비활성화 및 블러 효과)
|
|
document.body.classList.add('popup-open');
|
|
|
|
console.log('Background mask activated');
|
|
}
|
|
|
|
// 배경 마스킹 제거
|
|
function hideBackgroundMask() {
|
|
const mask = document.querySelector('.popup-background-mask');
|
|
if (mask) {
|
|
mask.classList.remove('active');
|
|
}
|
|
|
|
// body에서 popup-open 클래스 제거
|
|
document.body.classList.remove('popup-open');
|
|
|
|
console.log('Background mask deactivated');
|
|
}
|
|
|
|
/************************************************
|
|
* content1 스와이퍼
|
|
************************************************/
|
|
const cont1Urls = [
|
|
'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 첫 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1' // 두 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=5' // 세 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/index' // 네 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1' // 다섯 번째 슬라이드 URL
|
|
// 필요시 추가
|
|
];
|
|
|
|
const bullet1 = ['레이저리프팅', '쉬다주사(Face)', '스컬트라', '스킨부스터', '필러']
|
|
|
|
const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
|
|
const cont1Swiper = new Swiper('.cont1_swiper', {
|
|
loop: useCont1Loop,
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 10,
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: '.cont1_swiper_pagination',
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return '<div class="' + className + '"><span>' + (bullet1[index]) + '</span></div>';
|
|
}
|
|
},
|
|
on: {
|
|
init: function () {
|
|
document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function (slide, idx) {
|
|
slide.style.cursor = 'pointer';
|
|
slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
|
|
slide.addEventListener('click', function () {
|
|
const url = slide.getAttribute('data-url');
|
|
if (url) window.open(url, '_blank');
|
|
});
|
|
});
|
|
},
|
|
slideChange: function () {
|
|
document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function (slide, idx) {
|
|
slide.style.cursor = 'pointer';
|
|
slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
|
|
slide.onclick = function () {
|
|
const url = slide.getAttribute('data-url');
|
|
if (url) window.open(url, '_blank');
|
|
};
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
/************************************************
|
|
* content2 스와이퍼
|
|
************************************************/
|
|
const cont2Urls = [
|
|
'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=8' // 첫 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=2' // 두 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=10' // 세 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=3' // 네 번째 슬라이드 URL
|
|
, 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=4' // 다섯 번째 슬라이드 URL
|
|
];
|
|
|
|
const bullet2 = ['써마지FLX', '울쎄라', '온다리프팅', '티타늄리프팅', '튠페이스']
|
|
|
|
const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
|
|
const cont2Swiper = new Swiper('.cont2_swiper', {
|
|
loop: useCont2Loop,
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 10,
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: '.cont2_swiper_pagination',
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return '<div class="' + className + '"><span>' + (bullet2[index]) + '</span></div>';
|
|
}
|
|
},
|
|
on: {
|
|
init: function () {
|
|
document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function (slide, idx) {
|
|
slide.style.cursor = 'pointer';
|
|
slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
|
|
slide.addEventListener('click', function () {
|
|
const url = slide.getAttribute('data-url');
|
|
if (url) window.open(url, '_blank');
|
|
});
|
|
});
|
|
},
|
|
slideChange: function () {
|
|
document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function (slide, idx) {
|
|
slide.style.cursor = 'pointer';
|
|
slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
|
|
slide.onclick = function () {
|
|
const url = slide.getAttribute('data-url');
|
|
if (url) window.open(url, '_blank');
|
|
};
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
/****************************************************************************
|
|
* 팝업 리스트 조회 (마스킹 기능 추가)
|
|
****************************************************************************/
|
|
function fn_selectListWebPopupJson() {
|
|
let formData = new FormData();
|
|
|
|
$.ajax({
|
|
url: encodeURI('/webpopup/selectListWebPopup.do'),
|
|
data: formData,
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
type: 'POST',
|
|
async: true,
|
|
success: function (data) {
|
|
if (data.msgCode == '0') {
|
|
//쿠기값 확인
|
|
let cookiedata = document.cookie;
|
|
if (cookiedata.indexOf("popup=done") < 0) {
|
|
$('.popup').addClass('open');
|
|
|
|
// *** 배경 마스킹 활성화 추가 ***
|
|
showBackgroundMask();
|
|
|
|
let totalCount = data.rows.length;
|
|
if (0 < totalCount) {
|
|
let popupContentList = $('#popupContentList');
|
|
let popupTabList = $('#popupTabList');
|
|
|
|
popupContentList.empty();
|
|
popupTabList.empty();
|
|
|
|
for (let i = 0; i < Math.min(data.rows.length, 5); i++) {
|
|
let isActive = i === 0 ? ' active' : '';
|
|
const isMobile = window.innerWidth <= 768;
|
|
const imgPath = isMobile ? (data.rows[i].m_filePath || data.rows[i].filePath) : data.rows[i].filePath;
|
|
|
|
// 탭 콘텐츠 생성
|
|
let contentHTML = '';
|
|
contentHTML += '<div role="tabpanel" class="tab-pane' + isActive + '" id="content' + (i + 1) + '">';
|
|
contentHTML += '<a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
|
|
contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i + 1) + '" />';
|
|
contentHTML += '</a>';
|
|
contentHTML += '</div>';
|
|
popupContentList.append(contentHTML);
|
|
|
|
// 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리)
|
|
let tabHTML = '';
|
|
tabHTML += '<li role="presentation"' + (isActive ? ' class="active"' : '') + '>';
|
|
tabHTML += '<a href="#content' + (i + 1) + '" role="tab" id="contentTitle' + (i + 1) + '" data-target="content' + (i + 1) + '">';
|
|
tabHTML += fn_addBrAfterFirstWord(data.rows[i].title);
|
|
tabHTML += '</a>';
|
|
tabHTML += '</li>';
|
|
popupTabList.append(tabHTML);
|
|
}
|
|
|
|
// 탭 클릭 이벤트 수동 구현
|
|
setupTabEvents();
|
|
setupPopupCloseEvents();
|
|
}
|
|
} else {
|
|
$('.popup').removeClass('open');
|
|
hideBackgroundMask(); // 추가
|
|
}
|
|
} else if ('-2' == data.msgCode) {
|
|
modalEvent.danger("로그인 오류", data.msgDesc, function () {
|
|
fn_leftFormAction('/weblogin/logout.do');
|
|
});
|
|
} else {
|
|
modalEvent.danger("조회 오류", data.msgDesc);
|
|
}
|
|
|
|
},
|
|
error: function (xhr, status, error) {
|
|
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
|
|
},
|
|
beforeSend: function () {
|
|
// 로딩열기
|
|
$(".loading-image-layer").show();
|
|
},
|
|
complete: function () {
|
|
// 로딩닫기
|
|
$(".loading-image-layer").hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 탭 이벤트 설정 함수 추가
|
|
function setupTabEvents() {
|
|
$('#popupTabList a[role="tab"]').off('click').on('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
const targetId = $(this).data('target');
|
|
|
|
// 모든 탭과 콘텐츠에서 active 클래스 제거
|
|
$('#popupTabList li').removeClass('active');
|
|
$('#popupContentList .tab-pane').removeClass('active');
|
|
|
|
// 클릭된 탭과 해당 콘텐츠에 active 클래스 추가
|
|
$(this).parent('li').addClass('active');
|
|
$('#' + targetId).addClass('active');
|
|
});
|
|
}
|
|
|
|
// 팝업 닫기 이벤트들을 설정하는 함수
|
|
function setupPopupCloseEvents() {
|
|
// 기존 이벤트 리스너 제거 후 새로 추가
|
|
const closeBtn = document.getElementById('btnPopupClose');
|
|
if (closeBtn) {
|
|
// 기존 이벤트 리스너 복제본 생성하여 교체
|
|
const newCloseBtn = closeBtn.cloneNode(true);
|
|
closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);
|
|
|
|
// 새로운 이벤트 리스너 추가
|
|
newCloseBtn.addEventListener('click', function () {
|
|
//체크박스 확인
|
|
const todayCheckbox = document.getElementById('today');
|
|
|
|
if (todayCheckbox.checked) {
|
|
setCookie('done', 1);
|
|
} else {
|
|
$('.popup').removeClass('open');
|
|
hideBackgroundMask();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function fn_addBrAfterFirstWord(input) {
|
|
// 문자열을 공백 기준으로 나눔
|
|
const words = input.trim().split(" ");
|
|
|
|
// 단어가 2개 이상일 때 첫 번째 단어 뒤에 <br class="mb"/> 추가
|
|
if (words.length > 1) {
|
|
return `${words[0]}<br class="mb"/> ${words.slice(1).join(" ")}`;
|
|
}
|
|
return input;
|
|
}
|
|
|
|
//쿠키데이터 설정 function (마스킹 기능 추가)
|
|
function setCookie(value, expiredays) {
|
|
let todayDate = new Date();
|
|
todayDate.setDate(todayDate.getDate() + expiredays);
|
|
document.cookie = "popup=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
|
|
$('.popup').removeClass('open');
|
|
|
|
// *** 배경 마스킹 제거 추가 ***
|
|
hideBackgroundMask();
|
|
}
|
|
|
|
/****************************************************************************
|
|
* 메인 배너 리스트 조회
|
|
****************************************************************************/
|
|
function fn_selectListWebMainBannerTypeAJson() {
|
|
let formData = new FormData();
|
|
formData.append('bannerType', 'PT');
|
|
|
|
$.ajax({
|
|
url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
|
|
data: formData,
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
type: 'POST',
|
|
async: true,
|
|
success: function (data) {
|
|
if (data.msgCode == '0') {
|
|
let totalCount = data.rows.length;
|
|
if (0 < totalCount) {
|
|
let listHTML = '';
|
|
let backgroundColorArr = ['#FC7687', '#ffafba', '#a94e4e', '#e1a28d'];
|
|
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
|
|
const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
|
|
const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
|
|
// 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
|
|
listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
|
|
listHTML += ' <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
|
|
listHTML += ' <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i + 1) + '" />';
|
|
listHTML += ' <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i + 1) + '" />';
|
|
listHTML += ' </a>';
|
|
listHTML += '</div>';
|
|
}
|
|
$("#mainBannerList").html(listHTML).trigger("create");
|
|
|
|
/************************************************
|
|
* main_banner 스와이퍼
|
|
************************************************/
|
|
const useMainBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
|
|
const mainBannerSwiper = new Swiper('.main_banner_swiper', {
|
|
loop: useMainBannerLoop,
|
|
slidesPerView: 1,
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: '.main_banner_pagination',
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return `<span class="${className}" style="flex: 1;"></span>`;
|
|
},
|
|
},
|
|
on: {
|
|
init: function () {
|
|
adjustBulletWidth();
|
|
updateActiveBullets(this.activeIndex);
|
|
},
|
|
slideChange: function () {
|
|
updateActiveBullets(this.realIndex);
|
|
},
|
|
},
|
|
});
|
|
|
|
///////// swiper-pagination-bullet 넓이 동적 조정 /////////
|
|
function adjustBulletWidth() {
|
|
const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet');
|
|
const paginationWidth = 490;
|
|
const bulletWidth = paginationWidth / bullets.length;
|
|
|
|
bullets.forEach(bullet => {
|
|
bullet.style.width = `${bulletWidth}px`;
|
|
});
|
|
}
|
|
|
|
///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
|
|
function updateActiveBullets(activeIndex) {
|
|
const bullets = document.querySelectorAll('.mainbannerpagination .swiper-pagination-bullet');
|
|
bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active')); // 먼저 모두 제거
|
|
if (bullets[activeIndex]) {
|
|
bullets[activeIndex].classList.add('swiper-pagination-bullet-active'); // 하나만 추가
|
|
}
|
|
}
|
|
|
|
} else { $("#mainBannerList").empty(); }
|
|
} else if ('-2' == data.msgCode) {
|
|
modalEvent.danger("로그인 오류", data.msgDesc, function () {
|
|
fn_leftFormAction('/weblogin/logout.do');
|
|
});
|
|
} else {
|
|
modalEvent.danger("조회 오류", data.msgDesc);
|
|
}
|
|
|
|
},
|
|
error: function (xhr, status, error) {
|
|
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
|
|
},
|
|
beforeSend: function () {
|
|
// 로딩열기
|
|
$(".loading-image-layer").show();
|
|
},
|
|
complete: function () {
|
|
// 로딩닫기
|
|
$(".loading-image-layer").hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
/****************************************************************************
|
|
* 서브 배너 이벤트 리스트 조회
|
|
****************************************************************************/
|
|
function fn_selectListWebMainBannerTypeBJson() {
|
|
let formData = new FormData();
|
|
formData.append('bannerType', 'PB');
|
|
|
|
$.ajax({
|
|
url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
|
|
data: formData,
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
type: 'POST',
|
|
async: true,
|
|
success: function (data) {
|
|
if (data.msgCode == '0') {
|
|
let totalCount = data.rows.length;
|
|
|
|
if (0 < totalCount) {
|
|
let listHTML = '';
|
|
let backgroundColorArr = ['#666', '#999', '#ddd'];
|
|
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
|
|
const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
|
|
const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
|
|
// 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
|
|
listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
|
|
listHTML += ' <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
|
|
listHTML += ' <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i + 1) + '" />';
|
|
listHTML += ' <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i + 1) + '" />';
|
|
listHTML += ' <button class="detail_btn">Detail view ></button>';
|
|
listHTML += ' </a>';
|
|
listHTML += '</div>';
|
|
}
|
|
$("#subBannerList").html(listHTML).trigger("create");
|
|
|
|
/************************************************
|
|
* sub_banner 스와이퍼
|
|
************************************************/
|
|
const useSubBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
|
|
const subBannerSwiper = new Swiper('.sub_banner_swiper', {
|
|
loop: useSubBannerLoop,
|
|
slidesPerView: 1,
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: '.sub_banner_pagination',
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
return `<span class="${className}" style="flex: 1;"></span>`;
|
|
},
|
|
},
|
|
on: {
|
|
init: function () {
|
|
adjustSubBulletWidth();
|
|
updateSubActiveBullets(this.activeIndex);
|
|
},
|
|
slideChange: function () {
|
|
updateSubActiveBullets(this.realIndex);
|
|
},
|
|
},
|
|
});
|
|
|
|
///////// swiper-pagination-bullet 넓이 동적 조정 /////////
|
|
function adjustSubBulletWidth() {
|
|
const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
|
|
const paginationWidth = 490;
|
|
const bulletWidth = paginationWidth / bullets.length;
|
|
|
|
bullets.forEach((bullet) => {
|
|
bullet.style.width = `${bulletWidth}px`;
|
|
});
|
|
}
|
|
|
|
///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
|
|
function updateSubActiveBullets(activeIndex) {
|
|
const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
|
|
|
|
bullets.forEach((bullet, index) => {
|
|
if (index <= activeIndex) {
|
|
bullet.classList.add('swiper-pagination-bullet-active');
|
|
} else {
|
|
bullet.classList.remove('swiper-pagination-bullet-active');
|
|
}
|
|
});
|
|
}
|
|
|
|
} else { $("#subBannerList").empty(); }
|
|
} else if ('-2' == data.msgCode) {
|
|
modalEvent.danger("로그인 오류", data.msgDesc, function () {
|
|
fn_leftFormAction('/weblogin/logout.do');
|
|
});
|
|
} else {
|
|
modalEvent.danger("조회 오류", data.msgDesc);
|
|
}
|
|
|
|
},
|
|
error: function (xhr, status, error) {
|
|
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
|
|
},
|
|
beforeSend: function () {
|
|
// 로딩열기
|
|
$(".loading-image-layer").show();
|
|
},
|
|
complete: function () {
|
|
// 로딩닫기
|
|
$(".loading-image-layer").hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
/****************************************************************************
|
|
* 인스타그램 피드 리스트 조회 (백엔드 API 사용)
|
|
****************************************************************************/
|
|
function fn_selectListWebInstagramJson() {
|
|
let formData = new FormData();
|
|
$.ajax({
|
|
url: encodeURI('/webinstagram/selectListWebInstagram.do'),
|
|
data: formData,
|
|
dataType: 'json',
|
|
processData: false,
|
|
contentType: false,
|
|
type: 'POST',
|
|
async: true,
|
|
success: function (data) {
|
|
if (data.msgCode == '0') {
|
|
let totalCount = data.rows.length;
|
|
if (0 < totalCount) {
|
|
let listHTML = '';
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
const currentSlideIndex = i + 1;
|
|
const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`;
|
|
let mediaUrl = data.rows[i].media_url;
|
|
let permalink = data.rows[i].permalink;
|
|
let mediaType = data.rows[i].media_type || '';
|
|
let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl;
|
|
listHTML += '<div class="swiper-slide" aria-label="' + currentAriaLabel + '">';
|
|
listHTML += ' <a href="' + permalink + '" target="_blank" rel="noopener">';
|
|
if (mediaType === 'VIDEO' || mediaType === 'REEL') {
|
|
listHTML += ' <img src="' + thumbnailUrl + '" alt="instagram' + (i + 1) + '" />';
|
|
} else {
|
|
listHTML += ' <img src="' + mediaUrl + '" alt="instagram' + (i + 1) + '" />';
|
|
}
|
|
listHTML += ' </a>';
|
|
listHTML += '</div>';
|
|
}
|
|
$("#instagramList").html(listHTML).trigger("create");
|
|
// 커스텀 내비게이션과 연동
|
|
initInstagramCustomNav(data);
|
|
}
|
|
} else if ('-2' == data.msgCode) {
|
|
modalEvent.danger("로그인 오류", data.msgDesc, function () {
|
|
fn_leftFormAction('/weblogin/logout.do');
|
|
});
|
|
} else {
|
|
modalEvent.danger("조회 오류", data.msgDesc);
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
|
|
},
|
|
beforeSend: function () {
|
|
// 로딩열기
|
|
$(".loading-image-layer").show();
|
|
},
|
|
complete: function () {
|
|
// 로딩닫기
|
|
$(".loading-image-layer").hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**********************************
|
|
* instagram 스와이퍼 + 커스텀 내비게이션 (썸네일 3개 고정) - 수정버전
|
|
**********************************/
|
|
function initInstagramCustomNav(data) {
|
|
const totalCount = data.rows.length;
|
|
if (totalCount === 0) return;
|
|
|
|
// 썸네일은 최대 5개로 고정
|
|
const maxThumbs = 3;
|
|
const showThumbs = Math.min(totalCount, maxThumbs);
|
|
let currentActiveIndex = 0; // 현재 활성 인덱스 추적
|
|
|
|
// 썸네일 버튼 생성 (활성 상태 포함)
|
|
function createThumbnails(startIndex = 0) {
|
|
let thumbsHTML = '';
|
|
for (let i = 0; i < showThumbs; i++) {
|
|
const dataIndex = (startIndex + i) % totalCount;
|
|
const mediaUrl = data.rows[dataIndex].media_url;
|
|
const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl;
|
|
const isActive = dataIndex === currentActiveIndex ? 'active' : '';
|
|
thumbsHTML += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}">
|
|
<img src="${thumbnailUrl}" alt="thumb${dataIndex + 1}" />
|
|
</div>`;
|
|
}
|
|
document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML;
|
|
}
|
|
|
|
// 초기 썸네일 생성
|
|
createThumbnails(0);
|
|
|
|
// Swiper 인스턴스
|
|
setTimeout(function () {
|
|
const instagramSwiper = new Swiper('.instagram_swiper', {
|
|
loop: true,
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 3.2,
|
|
spaceBetween: 20,
|
|
},
|
|
0: {
|
|
slidesPerView: 2.1,
|
|
spaceBetween: 5,
|
|
},
|
|
},
|
|
on: {
|
|
slideChange: function () {
|
|
const newIndex = this.realIndex % totalCount;
|
|
currentActiveIndex = newIndex; // 활성 인덱스 업데이트
|
|
|
|
// 콘텐츠가 5개보다 많은 경우 썸네일 순환 업데이트
|
|
if (totalCount > maxThumbs) {
|
|
// 현재 활성 썸네일이 보이는지 확인
|
|
const visibleThumbs = Array.from(document.querySelectorAll('.custom-swiper-thumb'));
|
|
const isActiveVisible = visibleThumbs.some(thumb =>
|
|
parseInt(thumb.dataset.index) === currentActiveIndex
|
|
);
|
|
|
|
// 활성 썸네일이 보이지 않으면 썸네일 업데이트
|
|
if (!isActiveVisible) {
|
|
updateThumbnailsForIndex(currentActiveIndex);
|
|
} else {
|
|
// 보이면 활성 상태만 업데이트
|
|
updateCustomThumbActive(currentActiveIndex);
|
|
}
|
|
} else {
|
|
updateCustomThumbActive(currentActiveIndex);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 좌우 버튼 이벤트
|
|
document.querySelector('.custom-swiper-btn.prev').onclick = function () {
|
|
instagramSwiper.slidePrev();
|
|
};
|
|
document.querySelector('.custom-swiper-btn.next').onclick = function () {
|
|
instagramSwiper.slideNext();
|
|
};
|
|
|
|
// 썸네일 클릭 이벤트
|
|
document.querySelector('.custom-swiper-thumbs').onclick = function (e) {
|
|
const thumb = e.target.closest('.custom-swiper-thumb');
|
|
if (thumb) {
|
|
const targetIndex = parseInt(thumb.dataset.index);
|
|
instagramSwiper.slideToLoop(targetIndex);
|
|
}
|
|
};
|
|
|
|
// 현재 슬라이드에 맞춰 썸네일 업데이트
|
|
function updateThumbnailsForIndex(activeIndex) {
|
|
if (totalCount <= maxThumbs) return;
|
|
|
|
// 현재 활성 인덱스를 중심으로 썸네일 배치
|
|
let startIndex = activeIndex - Math.floor(maxThumbs / 2);
|
|
if (startIndex < 0) startIndex = totalCount + startIndex;
|
|
|
|
createThumbnails(startIndex);
|
|
}
|
|
|
|
// 활성 썸네일 표시
|
|
function updateCustomThumbActive(activeIdx) {
|
|
document.querySelectorAll('.custom-swiper-thumb').forEach(function (thumb) {
|
|
const thumbIndex = parseInt(thumb.dataset.index);
|
|
thumb.classList.toggle('active', thumbIndex === activeIdx);
|
|
});
|
|
}
|
|
|
|
// 초기 활성 상태 설정
|
|
updateCustomThumbActive(0);
|
|
}, 0);
|
|
}
|
|
|
|
// 초기화 실행
|
|
fn_init();
|
|
|
|
// 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가)
|
|
document.getElementById('btnPopupClose').addEventListener('click', function () {
|
|
$('.popup').removeClass('open');
|
|
// *** 배경 마스킹 제거 추가 ***
|
|
hideBackgroundMask();
|
|
});
|
|
|
|
// 추가 이벤트 리스너들 (새로 추가)
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// ESC 키로 팝업 닫기
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape' && document.querySelector('.popup.open')) {
|
|
$('.popup').removeClass('open');
|
|
hideBackgroundMask();
|
|
}
|
|
});
|
|
|
|
// 마스크 영역 클릭 시 팝업 닫기 (선택사항)
|
|
const mask = document.querySelector('.popup-background-mask');
|
|
if (mask) {
|
|
mask.addEventListener('click', function () {
|
|
$('.popup').removeClass('open');
|
|
hideBackgroundMask();
|
|
});
|
|
}
|
|
});
|