(function($){ // // 處理zoombox觸發時背景外漏問題 // $('.zoonbox').on('mouseenter', 'img[role="presentation"]', function(e) { // // console.log() // if($(this).complete){ // $(this).siblings('.picbox').css({ // opacity: 0 // }); // }else{ // $(this).siblings('.picbox').css({ // opacity: 1 // }); // } // }).on('mousemove', 'img[role="presentation"]', function(e) { // console.log($(this).css('[opacity, top, left]')) // }).on('mouseleave', 'img[role="presentation"]', function(e) { // $(this).siblings('.picbox').removeAttr('style') // }); /* 回到購買處 */ $('.gobuy').on('click',function(){ var tol = $(window).height(); console.log(tol); var buy = $('.button-line').offset().top-tol+50 ; $("html,body").scrollTop(buy); }); /*為JQ添加naturalWidth()和naturalHeight()方法,抓取圖片原始尺寸*/ var props = ['Width', 'Height'], prop; $(document).on('click','.click-pic',function(){ // prodpop-new popBox var ID = $(this).data('id'); $.ajax({ type:'POST', url:'/os/shopcart/ajax/ajax_prodnew.php', data:{'ID':ID}, success: function(data){ // console.log('data'); $('.prodpop-new').html(data); $('.prodpop-new').css('display','block'); //滿額加購跳出視窗 if($('.prodpop-new .prodpop-itempic').length >4){ // console.log('owl'); $('.prodpop-new .prodpop-other').addClass('owl-carousel').owlCarousel({ loop:true, margin:10, items:4, navText : ['',''], }); } }}); $('.prodpop-new').on('click','.prodpop-other img',function(){ var line = $(this).attr('src'); console.log(line); $(".prodpop-new .prodpop-pic img").attr('src',line); }) }); $(document).on('click','.prodpop-new .close',function(){ $('.prodpop-new').css('display','none'); }); if($('.content_1 .click-block').length >3){ $('.content_1 .click-block').css('width',"98%"); $('.oproduct-tagcontent .content_1').addClass('owl-carousel').owlCarousel({ responsive:{ 0:{ items : 1 }, 481:{ items : 2 }, 960:{ items : 3 } }, nav : true, navText : ['',''], }); } if($('.content_2 .click-block').length >3){ $('.content_2 .click-block').css('width',"98%"); $('.oproduct-tagcontent .content_2').addClass('owl-carousel').owlCarousel({ responsive:{ 0:{ items : 1 }, 481:{ items : 2 }, 960:{ items : 3 } }, nav : true, navText : ['',''], }); } if($('.content_3 .click-block').length >3){ $('.content_3 .click-block').css('width',"98%"); $('.oproduct-tagcontent .content_3').addClass('owl-carousel').owlCarousel({ responsive:{ 0:{ items : 1 }, 481:{ items : 2 }, 960:{ items : 3 } }, nav : true, navText : ['',''], }); } while (prop = props.pop()) { (function (natural, prop) { $.fn[natural] = (natural in new Image()) ? function () { return this[0][natural]; } : function () { var node = this[0], img, value; if (node.tagName.toLowerCase() === 'img') { img = new Image(); img.src = node.src, value = img[prop]; } return value; }; }('natural' + prop, prop.toLowerCase())); } /*評論預覽商品圖*/ $(".pic-box").on("click",".pic-over",function(){ var _this = $(this), pic_src = _this.find("img").attr('src'); _this.parents(".pic-box").find(".click").removeClass("click"); _this.addClass("click"); _this.parents(".pic-box").find(".pic-viewer").addClass("click") .find('img').attr({src: pic_src}); }); $('.pic-box').on('click', '.close', function(event) { var _this = $(this).parents(".pic-box"); _this.find(".pic-viewer").removeClass("click"); _this.find(".click").removeClass("click"); }); /*上方banner廣告圖*/ $(".top_productbox").addClass('owl-carousel').owlCarousel({ loop : false, responsive:{ 0:{ items : 2 }, 320:{ items : 3 }, 480:{ items : 6 }, 660:{ items : 8 }, 768:{ items : 9 }, 1023:{ items : 10 } }, nav : true, navText : ['',''], }); $('#preview').css('display','none'); $("article .recommend_l,article .history_l,article .other_l").addClass('owl-carousel').owlCarousel({ nav : true, responsive:{ 0:{ items : 2 }, 480:{ items : 3 }, 768:{ items : 4 }, 1024:{ items : 5 } }, navText : ['',''], }); const productImg = $('.productView > .productImg'); function bigPicCheck() { const zoomBoxCheck = $('.owl-item.active > .zoonbox').hasClass('zoom-box'); const windowSizeCheck = $(window).width() <= 768; if (zoomBoxCheck && windowSizeCheck){ $('#big_picture').removeClass('hidden'); $('#big_picture').show(); $('#big_picture + .previewBox').show(); } else { $('#big_picture').addClass('hidden'); $('#big_picture').hide(); $('#big_picture + .previewBox').hide(); } } if ($(".productImg .picbox ").length > 1){ let target = productImg.addClass('owl-carousel').owlCarousel({ loop : true, items : 1, nav : true, navText : ['',''] }); target.on('translated.owl.carousel', function(e) { bigPicCheck(); }); } $('.zoonbox').eq(0).addClass('now').parent('.owl-item').addClass('active'); bigPicCheck(); var moreview_owl = $('.moreview'); if($(".moreview .picitem ").length > 5){ moreview_owl.addClass('owl-carousel').owlCarousel({ loop:false, items : 5, nav : true, navText : ['',''], }); }else{ $(".moreview .picitem ").css('width','20%'); } let moreviewStep = 0 productImg.on('changed.owl.carousel', function(event) { const cloneOffset = Math.ceil(event.item.count / 2) const itemIndex = (event.item.index + event.item.count - cloneOffset) % event.item.count const moreviewPage = Math.floor(itemIndex / 5) if(moreviewPage !== moreviewStep) { moreviewStep = moreviewPage moreview_owl.trigger('to.owl.carousel', moreviewPage * 5); } $('.moreview .picitem').removeClass('now').eq(itemIndex).addClass('now'); }); productImg.on('translate.owl.carousel', function(e){ $('.productView .productImg .owl-item').find('video').each(function(){ $(this).get(0).pause(); }) $('.moreview .video_control').addClass('fa-play').removeClass('fa-pause'); }) productImg.on('translated.owl.carousel', function(e){ if($('.productView .productImg .owl-item.active').find('video').length > 0){ var video = $('.productView .productImg .owl-item.active').find('video').get(0); video.play(); moreview_Video(video) } }) $(document).on("click", ".moreview .picitem", function(){ let _this = $(this), pointer = _this.data("pointer") $('.moreview .picitem').removeClass('now') _this.addClass('now'); $(".productView .productImg").trigger('to.owl.carousel', pointer.replace("prodpic_","")) }) $('.followbox').on('mouseenter','.follow-item' , function(event) { var sth = $(this).find('img').attr('src').replace('.jpg','o.jpg'); $(this).find('img').attr('src',sth) }); $('.followbox').on('mouseleave','.follow-item' , function(event) { var sth = $(this).find('img').attr('src').replace('o.jpg','.jpg'); $(this).find('img').attr('src',sth) }); var _window = $(window); var change = 0; var change_1023 = 0; var moreview = false; var imgviewbox = $('.imgviewbox'); // _window.on('resize', function(){ // const $windowWidth = _window.width(); // switch ($windowWidth) { // case ($windowWidth =< 768 && change !== 768): // change = 768 // $('.productImg').addClass('mobile').removeClass('pc'); // break; // case ($windowWidth < 768 && change !== 960): // change = 960 // $('.productImg').removeClass('mobile').addClass('pc'); // break; // } // }) if(_window.width() > 769 && change != 960 ){ change = 960; moreview = true; $('.productView').on('mouseenter', '.zoom-box', function(e) { let big_pic = $(this).attr('big-pic'); $(this).zoom({ url: "" + big_pic, magnify: 1 }); }); }else if(_window.width() <= 768 && change!= 768){ change = 768; $('.item-1').on('click','img', function(event) { var html ='' ; imgviewbox.append(html).css('display','block'); }); imgviewbox.on('click','.close', function(event) { imgviewbox.css('display','none').find('img').remove(); }); }; if(_window.width() <= 1023 && change_1023 != 1023){ change_1023 = 1023; }else if(_window.width() > 1023 && change_1023 != 1200){ change_1023 = 1200; } $('article').on('click','.open-preview',function(){ var nowitem = $('.productImg .active').prevAll('.owl-item:not(".cloned")').length; $('article .previewbox').css('display','block').find('img').eq(nowitem).css('display','block'); }); $('article').find('.previewbox').on('click','.close',function(){ $('article .previewbox, .productView').removeAttr('style') .find('img').removeAttr('style'); }); _window.on('resize',function(){ if(_window.width() <= 1023 && change_1023 != 1023){ change_1023 = 1023; }else if(_window.width() > 1023 && change_1023 != 1200){ change_1023 = 1200; } if (_window.width() > 768) { $('.productImg').removeClass('mobile').addClass('pc'); } else { $('.productImg').removeClass('pc').addClass('mobile'); } if( _window.width() > 768 && change != 960){ change = 960; $('.productView').on('mouseenter', '.zoonbox', function(e) { let big_pic = $(this).attr('big-pic'); $(this).zoom({ url: big_pic, magnify: 1 }); }); $('.item-1').off('click','img'); imgviewbox.off('click','.close'); }else if(_window.width() <= 768 && change != 768){ change = 768; $('.item-1').on('click','img', function(event) { var html ='' ; imgviewbox.append(html).css('display','block'); }); imgviewbox.on('click','.close', function(event) { imgviewbox.css('display','none').find('img').remove(); }); }; }); _window.trigger('resize'); /* 放大鏡效果 */ function zoonbox(){ var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,mouseY,mouseX,preview,preview_img,scale_h,scale_w; preview_str = '