';
ImgBox = $('.productImg .now').offset();
$('.productView').off('mouseenter mousemove mouseleave','.picbox');
$('.productView').on('mouseenter','.picbox',function(){
var preview_str = '
';
var zoonbox_now = $(this).parents('.zoonbox'),
big_pic = zoonbox_now.attr('big-pic') || $(this).find('img').attr('src');
preview_str += '
';
zoonbox_now.append(preview_str);
preview = zoonbox_now.find('.preview');
preview.css({
height: '80%',
width: '80%'
});
// console.log(zoonbox_now);
var _this = $(this),
previewBox = $('.productView .preview');
viewbox = _this.find('.viewbox');
// console.log(viewbox)
var image = new Image();
image.src = "/upload_files/fonlego-rwd/prodpic/"+big_pic;
image.onload = function() {
// 原始圖片高度
ImgBox_h = image.height;
// 原始圖片寬度
ImgBox_w = image.width;
// 若原始圖片高度 < 放大框高度，縮小比例為1
scale_h = (previewBox.height() / ImgBox_h < 1) ? previewBox.height() / ImgBox_h : 1;
// 若原始圖片寬度 < 放大框寬度，縮小比例為1
scale_w = (previewBox.width() / ImgBox_w < 1) ? previewBox.width() / ImgBox_w : 1 ;
// 取得觀看範圍的高：圖框高 * 放大高 / 原始高
viewbox_h = _this.height() * (scale_h);
// 取得觀看範圍寬：圖框寬 * 放大寬 / 原始寬
viewbox_w = _this.width() * (scale_w);
// 滑鼠可移動 Y 軸範圍
mouseY = _this.height() - viewbox_h;
// 滑鼠可移動 X 軸範圍
mouseX = _this.width() - viewbox_w;
viewbox.css({
'opacity': 1,
'height': viewbox_h,
'width': viewbox_w,
});
// zoonbox_now.html(preview_str);
// console.log(preview_str);
// console.log(preview)
preview_img = preview.find('img');
_this.parents('.owl-stage-outer').css('overflow', 'visible');
}
})
.on('mousemove','.picbox',function(e){
previewBox = $('.productView .preview');
// 取得圖框距離網頁上方的值
const canvusTop = $(this).offset().top;
// 取得圖框距離網頁左方的值
const canvusLeft = $(this).offset().left;
// 取得滑鼠目前位置距離網頁上方的值
const mouseTop = e.pageY;
// 取得滑鼠目前位置距離網頁左方的值
const mouseLeft = e.pageX;
if(preview_img){
if ((mouseLeft - canvusLeft) < viewbox_w / 2) {
preview_img.css({
left: 0
})
viewbox.css({
left: 0
})
} else if((mouseLeft - canvusLeft) > ($(this).width() - viewbox_w / 2)){
preview_img.css({
left: (ImgBox_w - previewBox.width()) * -1
})
viewbox.css({
left: mouseX
})
} else {
if(preview_img){
preview_img.css({
left: (mouseLeft - canvusLeft - viewbox_w / 2) * ImgBox_w / $(this).width() * -1
});
}
if(viewbox){
viewbox.css({
left: mouseLeft - canvusLeft - viewbox_w / 2
})
}
}
if ((mouseTop - canvusTop) < viewbox_h / 2) {
preview_img.css({
top: 0
})
viewbox.css({
top: 0
})
} else if((mouseTop - canvusTop) > ($(this).height() - viewbox_h / 2)){
preview_img.css({
top: (ImgBox_h - previewBox.height()) * -1
})
viewbox.css({
top: mouseY
})
} else {
preview_img.css({
top: (mouseTop - canvusTop - viewbox_h / 2) * ImgBox_w / $(this).height() * -1
});
viewbox.css({
top: mouseTop - canvusTop - viewbox_h / 2
})
}
}
})
.on('mouseleave','.picbox',function(){
$('.productImg .viewbox').css({
'opacity':0,
});
$('.productImg .preview').remove();
preview_str= '
';
$('.owl-stage-outer').removeAttr('style');
});
}
// 手機版 slide 功能設定
function mobileSlide(data) {
$('.productView').html(data)
// owl slide 設定
const owlSlide = $('.productImg')
owlSlide.owlCarousel({
loop: false,
items: 1,
nav: true,
});
const targetVideo = owlSlide.find('#Video')[0]
const buttonWrap = $('#videobutton')
const videoIndex = owlSlide.find('.picbox').index(owlSlide.find('.videobox')[0])
const hashArray = []
$('.productImg').find('.picbox').each(function(i, item) {
hashArray.push($(item).data('hash'))
});
if(targetVideo) {
// owl slide 中的放大鏡按鈕設定
owlSlide.on('changed.owl.carousel', function(e) {
const thisIndex = e.item.index
if(thisIndex === videoIndex) {
$('#big_picture').addClass('hide')
// 影片播放
targetVideo.play()
buttonWrap.attr('class',"play").find('span').text('PAUSE')
} else {
$('#big_picture').removeClass('hide')
// 影片暫停
targetVideo.pause()
buttonWrap.attr('class',"stop").find('span').text('VIDEO')
}
})
// 影片播放按鈕設定
$('#videobutton > a').off('click')
$('#videobutton > a').on('click', function(e) {
const hashTarget = $(this).attr('href').slice(1)
const hashIndex = hashArray.indexOf(hashTarget)
// console.log(owlSlide.find('.owl-item').index(owlSlide.find('.owl-item.active')[0]))
if(owlSlide.find('.owl-item').index(owlSlide.find('.owl-item.active')[0]) === videoIndex) {
if(buttonWrap.hasClass('play')) {
// 影片暫停
targetVideo.pause()
buttonWrap.attr('class',"stop").find('span').text('VIDEO')
} else if(buttonWrap.hasClass('stop')) {
// 影片播放
targetVideo.play()
buttonWrap.attr('class',"play").find('span').text('PAUSE')
}
} else {
// 點擊按鈕前往 videoBox 區塊
owlSlide.trigger('to.owl.carousel', hashIndex)
}
})
}
}
// 快速購物輪播
function quickshopSlide() {
const slideTarget = $('#quickShopModal .quickshop-wrapper .productPreview')
if(slideTarget.children().length > 1) {
slideTarget.owlCarousel({
loop: true,
items: 1,
navText: ['',''],
dots: false,
autoplay: true,
animateOut: 'fadeOut',
autoplayTimeout: 6000,
autoplayHoverPause: true,
responsive: {
0: {
nav : false,
},
661: {
nav : true,
},
},
})
}
}
// ==========================================================
// 手機版熱門關鍵字開啟
// ==========================================================
;(function($) {
$('body').on('focus', '#mobileKeywords', function(e) {
$(this).parents('.mobile-search').find('.keywordsBox').addClass('in-focus')
})
$('body').on('click', '.mobile-search', function(e) {
if(!$(e.target).parents().hasClass('search-group') && !$(e.target).parents().hasClass('keyword-list')) {
$('.keywordsBox').removeClass('in-focus')
}
})
})($)
// ==========================================================
// 主選單開關
// ==========================================================
;(function($) {
$('.main-menu-toggle').on('click', function(e) {
$('.main-menu-toggle').toggleClass('close');
$('.navBox').toggleClass('menu-open');
$('body').toggleClass('overflow-hidden');
})
$('.navBox').on('click', '.closer', function(e) {
$(this).parents('.navBox').removeClass('menu-open')
$(this).parents('.navBox').find('.keywordsBox').removeClass('in-focus')
$('body').removeClass('overflow-hidden');
$('.main-menu-toggle').removeClass('close');
})
})($)
// ==========================================================
// 手機版第一層選單開啟第二層
// ==========================================================
;(function($) {
let menuStep = ''
$(window).on('resize', function(e) {
if($(this).width() > 1024 && menuStep !== 'desktop') {
menuStep = 'desktop'
$('#menu-nav').off('click', '.m-item-title')
$('.sub-item, .nav-item').removeClass('in-active')
$('#menu-nav').on('mouseenter', '.menu_class_a, .scroll-logo a', function(e) {
const target = $(this).data('target')
$(this).parents('.nav-item').addClass('in-active').siblings('.nav-item').removeClass('in-active')
if($(target).length && target) {
$(target).addClass('in-active').siblings('.sub-item').removeClass('in-active')
} else {
$('.sub-item').removeClass('in-active')
}
})
$('.navBox').on('mouseleave', function(e) {
$(this).find('.nav-item, .sub-item').removeClass('in-active')
})
} else if($(this).width() <= 1024 && menuStep !== 'mobile') {
menuStep = 'mobile'
$('#menu-nav').off('mouseenter', '.menu_class_a')
$('.navBox').off('mouseleave')
$('#menu-nav').on('click', '.m-item-title', function(e) {
const target = $(this).data('target')
$(this).parents('.nav-item').addClass('in-active').siblings('.nav-item').removeClass('in-active')
if($(target).length) {
e.preventDefault()
$(target).addClass('in-active').siblings('.sub-item').removeClass('in-active')
} else {
$('.sub-item').removeClass('in-active')
}
})
$('#menu-nav .nav-item:nth-child(2) .m-item-title').click()
}
})
$(window).trigger('resize')
})($)
// ==========================================================
// 手機版第二層選單開啟第三層
// ==========================================================
;(function($) {
let subMenuStep = ''
$(window).on('resize', function(e) {
if($(this).width() > 1024 && subMenuStep !== 'desktop') {
subMenuStep = 'desktop'
$('.mobile-nav-detail').off('click', '.link.with-child')
$('.mobile-nav-detail').find('.item').removeClass('in-active')
$('.mobile-nav-detail').on('mouseenter', '.link.with-child', function(e) {
const target = $(this).data('target')
$(target).addClass('in-active').siblings('.child-content').removeClass('in-active')
})
} else if($(this).width() <= 1024 && subMenuStep !== 'mobile') {
subMenuStep = 'mobile'
$('.mobile-nav-detail').off('mouseenter', '.link.with-child').off('mouseleave')
$('.mobile-nav-detail').on('click', '.link.with-child', function(e) {
e.preventDefault()
const target = $(this).data('target')
$(this).parents('.item').addClass('in-active').siblings('.item').removeClass('in-active')
$(target).addClass('in-active').siblings('.child-content').removeClass('in-active')
})
}
})
$(window).trigger('resize')
})($)
// ==========================================================
// GOTOP 相關設定
// ==========================================================
;(function($) {
let thisScrollTop = $(window).scrollTop()
$('.gotop').on('click',function(){
$("html,body").animate({scrollTop: 0},800);
});
$(window).scroll(function(e) {
const nowScrollTop = $(this).scrollTop()
const offsetCheck = nowScrollTop > 50
const scrollCheck = thisScrollTop > nowScrollTop
if(offsetCheck && scrollCheck) {
$('.gotop').fadeIn(400)
} else {
$('.gotop').fadeOut(150)
}
if(offsetCheck) {
$('body').addClass('is-sticky')
} else {
$('body').removeClass('is-sticky')
}
thisScrollTop = nowScrollTop
})
$(window).trigger('scroll')
})($)
// ==========================================================
// 主題館選單滑動功能
// ==========================================================
;(function($) {
const themePavilion = $('.theme-pavilion')
themePavilion.owlCarousel({
dots: false,
nav: true,
autoWidth: true,
pullDrag: false,
rewind: false,
loop: true,
responsive: {
0: {
margin: 20,
},
481: {
margin: 30,
},
769: {
margin: 40,
},
},
})
})($)
// ==========================================================
// label 滑動功能
// ==========================================================
;(function($) {
$('.form-wrapper .form-control').each(function(i, ele) {
if($(ele).val()) {
$(ele).parent('.form-box').addClass('with-value')
}
});
$(document).on('blur', '.form-control', function(e){
if($(this).val()) {
$(this).parent('.form-box').addClass('with-value')
} else {
$(this).parent('.form-box').removeClass('with-value')
}
})
})($)
// ==========================================================
// 尺寸表切換
// ==========================================================
;(function($) {
$('body').on('click', '.size-switch .switch-button', function(e) {
const switchTarget = $(this).data('target')
$(switchTarget).addClass('in-active').siblings('.switch-table').removeClass('in-active')
$(this).parent('.switch-item').addClass('in-active').siblings('.switch-item').removeClass('in-active')
})
})($)
// ==========================================================
// 日期select判斷區間
// ==========================================================
;(function($) {
//讓桌機picker點擊日期也能展開
if("showPicker" in HTMLInputElement.prototype){
$(document).on("click", "input[type='date']", function(){
$(this)[0].showPicker()
})
}
$(document).on("input", ".dueDate-select-picker", function(){
let _this = $(this),
dueDateBox = _this.parents(".dueDate-select-box"),
dueDateY = dueDateBox.find(".dueDate-y"),
dueDateM = dueDateBox.find(".dueDate-m"),
dueDateD = dueDateBox.find(".dueDate-d"),
dateArray = _this.val().split("-")
dueDateY.val(dateArray[0])
dueDateM.val(dateArray[1])
dueDateD.val(dateArray[2])
})
})($)
// ==========================================================
// 切換國碼判斷顯示提醒
// ==========================================================
;(function($) {
$(document).on("change", ".tel-code-select", function(){
let _this = $(this),
code = _this.find("option:selected").attr("code") || _this.find("option:selected").attr("tel-code")
//馬來西亞
if(code == '60'){
$(".tel-code-tips").addClass("in-active")
}else{
$(".tel-code-tips").removeClass("in-active")
}
})
})($)
// ==========================================================
// 判斷馬來手機1開頭
// ==========================================================
;(function($) {
function checkTel(box){
let input = box.find(".fn-tel-input")
code = box.find(".fn-tel-code"),
telalert = box.find(".fn-tel-alert")
if(code.length > 0){
if(code.val() === '60' && input.val().charAt(0) !== '1'){
telalert.addClass("in-show")
input.addClass("text-eye-custom")
}else{
telalert.removeClass("in-show")
input.removeClass("text-eye-custom")
}
}
}
$(document).on('input', '.fn-tel-input', function(){
checkTel($(this).parents(".fn-tel-box"))
})
$(document).on('change', '.fn-tel-code', function(){
checkTel($(this).parents(".fn-tel-box"))
})
})($)