// Usage
//
// require.register("browser/debug.js", function(module, exports, require){
// // Module code goes here
// });
//
// var debug = require("browser/debug.js");
function require(p) {
var path = require.resolve(p);
var mod = require.modules[path];
if (!mod) throw new Error('failed to require "' + p + '"');
if (!mod.exports) {
mod.exports = {};
mod.call(mod.exports, mod, mod.exports, require.relative(path));
}
return mod.exports;
}
require.modules = {};
require.resolve = function(path) {
var orig = path;
var reg = path + ".js";
var index = path + "/index.js";
return (
(require.modules[reg] && reg) ||
(require.modules[index] && index) ||
orig
);
};
require.register = function(path, fn) {
require.modules[path] = fn;
};
require.relative = function(parent) {
return function(p) {
if ("." != p.charAt(0)) return require(p);
var path = parent.split("/");
var segs = p.split("/");
path.pop();
for (var i = 0; i < segs.length; i++) {
var seg = segs[i];
if (".." == seg) path.pop();
else if ("." != seg) path.push(seg);
}
return require(path.join("/"));
};
};
require.register("modules/module.js", function(module, exports, require) {
module.exports = {
smallPicBox,
videoBox,
zoomBox,
pcProductPreview
};
});
// ==========================================================
// 小圖hover效果及切換功能
// ==========================================================
function smallPicBox() {
// if($(".moreview .picitem ").length > 5){
// $(".productView .moreview").owlCarousel({
// 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();
$(".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');
});
// }
}
// ==========================================================
// 影片效果
// ==========================================================
function videoBox(){
//影片控制
$(".moreview").on('click','.video_control',function(){
var video = document.getElementById("Video");
if(video.paused){
$(this).addClass('fa-pause').removeClass('fa-play');
video.play();
}else{
$(this).addClass('fa-play').removeClass('fa-pause');
video.pause();
}
});
//影片預覽圖
if(document.getElementById("Video")){
document.getElementById("Video").oncanplay=function(){
var video = $("#Video").get(0);
var canvas = document.getElementById("video_review");
canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
};
}
}
// ==========================================================
//
// ==========================================================
function zoomBox(){
var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,mouseY,mouseX,preview,preview_img,scale_h,scale_w;
preview_str = '
';
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 ((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 {
preview_img.css({
left: (mouseLeft - canvusLeft - viewbox_w / 2) * ImgBox_w / $(this).width() * -1
});
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');
});
}
//================================
// 桌機圖片預覽
//================================
function pcProductPreview(){
var pcFlag = true
var mainPicSrc = ""
$(window).on("resize", function(){
let windowWidth = document.body.clientWidth
if((windowWidth > 768) && pcFlag){
$(document).on("click", ".productView .moreview img", function(){
let mainPicSrcNow = $(".productView .moreview img").eq(0).prop("src")
if((mainPicSrc != mainPicSrcNow) || (mainPicSrcNow.indexOf("null")>0)){
let previewInner = ``
$(".productView .moreview .picitem:not(.pic-mobile) img").each(function(){
previewInner += `
`
})
$(".pc-preview-container").html(previewInner)
mainPicSrc = mainPicSrcNow
}
//計算是第幾張圖片
let index = $(this).parents(".picitem").index() + (($(this).parents(".pic-small").length > 0) ? 4 : 0)
$(".pc-preview-wrapper").addClass("show")
//圖片張數向下取整 * 單行高度(容器高/圖片張數向上取整)
$(".pc-preview-wrapper").scrollTop(Math.floor(index/2)*($(".pc-preview-container").height() / Math.ceil($(".pc-preview-container .pc-preview-img").length / 2)))
})
$(document).on("click", ".pc-preview-wrapper .pc-preview-close", function(){
$(".pc-preview-wrapper").removeClass("show")
})
}else if(windowWidth <= 768){
$(document).off("click", ".productView .moreview img, .pc-preview-wrapper .pc-preview-close")
pcFlag = false
}
})
}