gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20240429 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2024-05-06 20:06:11 +09:00
parent a8daeea014
commit ba4872ca76
9 changed files with 1397 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
assets/js/common.js
View File

@@ -266,6 +266,7 @@ $(document).ready(function() {
pdpDisplayThemeSwiperDtl();
pdpInCarGameSwiper()
pdpInCarGameSwiperDtl();
pdpIntro();
flagScroll = false;
}
}
@@ -327,8 +328,9 @@ $(document).ready(function() {
});
var dtthumbClickFlag = false;
var flagAutoPlay = true;
// var swiperThemeDtl;
function pdpDisplayThemeSwiper(){
if ($('.pdpDisplayThemeSwiper').length > 0) {
var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
@@ -343,22 +345,21 @@ function pdpDisplayThemeSwiper(){
breakpoints: {
// when window width is >= 320px
320: {
spaceBetween: 10,
spaceBetween: 8,
},
// when window width is >= 480px
480: {
},
// when window width is >= 640px
640: {
spaceBetween: 20,
spaceBetween: 15,
}
},
// navigation: {
// nextEl: ".displayTheme .swiper-button-next",
// prevEl: ".displayTheme .swiper-button-prev",
// },
on: {
init: function () {
$(".displayTheme .dtthumb").each(function(){
$(this).attr("data-click", "false");
});
},
},
});
@@ -366,13 +367,10 @@ function pdpDisplayThemeSwiper(){
$('.pdpDisplayThemeSwiper').hover(function(){
console.log('flagAutoPlay1 ==== ', flagAutoPlay);
if(flagAutoPlay==true){
console.log('flagAutoPlay2 ==== ', flagAutoPlay);
swiperTheme.autoplay.stop();
}
}, function(){
console.log('flagAutoPlay3 ==== ', flagAutoPlay);
if(flagAutoPlay==true){
swiperTheme.autoplay.start();
}
@@ -382,14 +380,16 @@ function pdpDisplayThemeSwiper(){
// 클릭 시 할 특별한 동작이 없더라도 이 핸들러를 설정해두면,
// 사용자의 클릭으로 인한 상호작용으로 자동 재생이 중단되는 것을 방지할 수 있습니다.
};
$('.displayTheme .dtthumb').hover(function(){
let leftPos = $(this).offset().left;
console.log();
$(this).append(`<div class="tooltip"><div class="msg">썸네일을 클릭하면 적용예시를 확인<br>할 수 있습니다.</div><button class="btn-close">x</button></div>`);
}, function(){
$('.displayTheme .tooltip').remove();
});
if(dtthumbClickFlag===false){
$(this).append(`<div class="tooltip"><div class="msg">썸네일을 클릭하면 적용예시를 확인<br>할 수 있습니다.</div><button class="btn-close">x</button></div>`);
}
}, function(){
if($('.displayTheme .tooltip').length > 0){
$('.displayTheme .tooltip').remove();
}
});
}
flagScroll = false;
@@ -402,6 +402,16 @@ function pdpDisplayThemeSwiperDtl(){
nextEl: ".displayThemeDtl .swiper-button-next",
prevEl: ".displayThemeDtl .swiper-button-prev",
},
pagination: {
el: ".displayThemeDtl .swiper-pagination",
},
on: {
init: function () {
$(document).on("click", ".displayTheme .dtthumb", function() {
swiperThemeDtl.slideTo(0);
});
},
},
});
}
@@ -517,12 +527,31 @@ $(document).on("click", ".inCarGame .dtthumb", function(e) {
flagAutoPlay = false;
});
$(document).on("click", ".displayTheme .dtthumb", function() {
const dtlImgPath = $(this).attr("value");
const dtlImgs = $(".dtlImgs");
const dtthumbClickState = $(this).attr("data-click");
if($('.displayTheme .tooltip').length > 0){
$('.displayTheme .tooltip').remove();
}
const dtthumbItem = $(this).html();
const dtthumbItemValue = $(this).attr("value");
const dtthumbSelectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbItemValue}]`)
const dtthumbItemHtml = `
<div class="btn-dtthumb">
<button class="dtthumb" value="${dtthumbItemValue}">
${dtthumbItem}
</button>
<div class="btn-remove">x</div>
</div>
`
$(".dtthumb").removeClass("active");
$(this).addClass("active");
dtthumbSelectedItem.addClass("active");
$('.dtlImgs .item').addClass('change')
setTimeout(function() {
@@ -537,15 +566,55 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
$(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
});
// const visualBgSrc = $(".visualBg img").attr("src");
// const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
// const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
// $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
if(dtthumbClickState === "false"){
$('.theme-story').append(dtthumbItemHtml);
$(this).attr("data-click", "true");
dtthumbSelectedItem.addClass("selected");
}
// flagAutoPlay = false;
$('.btn-dtthumb .btn-remove').click(function() {
const dtthumbValue = $(this).closest('.btn-dtthumb').find('.dtthumb').attr("value");
const selectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbValue}]`)
$(this).closest('.btn-dtthumb').remove();
selectedItem.attr("data-click", "false");
selectedItem.removeClass("selected");
})
dtthumbClickFlag = true;
});
function pdpIntro(){
const videoElement = document.getElementById('dpThemeVideo');
const videoWrap = $('.displayTheme .video_wrap');
const btnIntro = $('.displayTheme .btn-intro');
const btnClose = $('.video_wrap .btn-close');
videoElement.addEventListener('ended', function() {
$(videoWrap).fadeOut('fast',function(){
videoElement.currentTime = 0;
videoElement.pause();
});
});
$(btnIntro).on('click', function() {
$(videoWrap).fadeIn('fast',function(){
videoElement.currentTime = 0;
videoElement.play();
});
});
$(btnClose).on('click', function() {
$(videoWrap).fadeOut('fast',function(){
videoElement.currentTime = 0;
videoElement.pause();
});
});
}
//마이페이지 lnb 스와이프
var ww = $(window).width();
var mySwiper = undefined;