// ==========================================================
// 商品展示區塊輪播、商品圖預覽功能、手機版放大功能、購物跳窗
// ==========================================================
;(function($) {
if($('.moreview').children('.picitem').length > 3) {
$('.moreview').owlCarousel({
margin: 5,
dots: false,
nav: true,
navText: ['', ''],
responsive: {
0: {
items: 4
},
576: {
items: 5
},
675: {
items: 3
},
768: {
items: 4
},
992: {
items: 5
},
}
})
}
$(document).on('click', '.moreview .picitem', function(e) {
e.preventDefault()
let _this = $(this),
moreview = _this.parents('.moreview'),
idx = 0
if(moreview.hasClass('owl-carousel')){
idx = _this.parent('.owl-item').index()
}else{
idx = _this.index()
}
//const thisTarget = _this.attr('data-target')
moreview.find('.now').removeClass('now')
_this.addClass('now')
_this.parents('.product-detail').find('.item-box').eq(idx).addClass('now')
.siblings('.item-box').removeClass('now')
})
let previewStep = ''
$(window).on('resize', function(e) {
if($(this).width() >= 992 && previewStep !== 'desktop') {
previewStep = 'desktop'
// 預覽圖 hover 事件
$('.moreview').on('mouseenter', '.picitem', function(e) {
e.preventDefault()
let targetIndex = null
if($(this).parent().hasClass('moreview')) {
targetIndex = $(this).index()
} else {
targetIndex = $(this).parent('.owl-item').index()
}
$('.productImg').find('.item-box').eq(targetIndex).addClass('in-hover')
.siblings('.item-box').removeClass('in-hover')
}).on('mouseleave', function(e) {
e.preventDefault()
$('.productImg').find('.item-box').removeClass('in-hover')
})
// 手機版放大圖
$('.productImg').off('click', '.item-box > a')
$('body').off('click', '.zoomIn-wrapper')
$('.zoomIn-wrapper').remove()
$('body').removeClass('overflow-hidden')
//購買跳窗
$(".selectPopupBox").removeClass('is-show');
$('body').off('click', '.selectbox-button');
} else if($(this).width() < 992 && previewStep !== 'mobile') {
previewStep = 'mobile'
// 預覽圖 hover 事件
$('.moreview').off('mouseenter', '.picitem')
.off('mouseleave')
// 手機版放大圖
$('.productImg').on('click', '.item-box > a', function(e) {
e.preventDefault()
const zoomTarget = $(this).attr('href')
const zoomInDom = `
`
$('body').append(zoomInDom).addClass('overflow-hidden')
})
$('body').on('click', '.zoomIn-wrapper', function(e) {
if(e.target === e.currentTarget || $(e.target).hasClass('zoomIn-closer')) {
e.preventDefault()
$('.zoomIn-wrapper').fadeOut('400').remove()
$('body').removeClass('overflow-hidden')
}
})
}
})
})($)
// ==========================================================
// trigger function
// ==========================================================
;(function($, jQuery, window, document) {
$(window).trigger('resize')
})($, jQuery, window, document)
function smallPicBox(){
/* 小圖hover效果及切換功能 */
if($(".moreview .picitem ").length > 5){
$(".productView .moreview").owlCarousel({
dots: false,
navText: ['', ''],
loop:false,
items : 5,
nav : true,
}).on('mouseleave','.owl-stage-outer', function() {
$(".productView .zoonbox").removeAttr('style');
})
.on('click','.owl-item', function() {
var now = $(this).index();
$(".productView .owl-item").not(this).find('.picitem').removeClass('now');
$(this).find('.picitem').addClass('now');
$(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
})
.on('mouseenter','.owl-item', function() {
var now = $(this).index();
//var nowbox = $('.productImg .now').index();
//console.log(nowbox );
$(".productView .zoonbox").css('display','none').eq(now).css('display','block');
//$('.productImg .now').css('display','none');
})
.on('mouseleave','.owl-item', function() {
var now = $(this).index();
$(".productView .zoonbox").eq(now).css('display','none');
});
}else{
$(".productView .moreview")
.on('mouseleave', function() {
$(".productView .zoonbox").removeAttr('style');
})
.on('click','.picitem', function() {
var now = $(this).index();
$(".productView .picitem").removeClass('now');
$(this).addClass('now');
$(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
})
.on('mouseenter','.picitem', function() {
var now = $(this).index();
//var nowbox = $('.productImg .now').index();
//console.log(nowbox );
$(".productView .zoonbox").css('display','none').eq(now).css('display','block');
//$('.productImg .now').css('display','none');
})
.on('mouseleave','.picitem', function() {
var now = $(this).index();
$(".productView .zoonbox").eq(now).css('display','none');
});
}
}
/*影片效果*/
videoBox()