(function($){ /* 回到購買處 */ $('.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; 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"); }); $('.item-7 ').on('mouseenter', '.table-td', function(event) { var now_n = $(this).index()+1; $('.item-7 .table-td:nth-child('+now_n+')').css({ 'background-color': '#000', 'color': "#fff" }); }).on('mouseleave', '.table-td', function(event) { $('.item-7 .table-td').removeAttr('style'); }); /*上方banner廣告圖*/ $(".top_productbox").owlCarousel({ loop : false, responsive:{ 0:{ items : 2 }, 320:{ items : 3 }, 480:{ items : 6 }, 660:{ items : 8 }, 768:{ items : 9 }, 1023:{ items : 10 } }, nav : true, }); $('#preview').css('display','none'); $("article .recommend_l,article .history_l,article .other_l").owlCarousel({ nav : true, margin:28, responsive:{ 0:{ items : 2, margin:10, }, 480:{ items : 2, margin:15, }, 768:{ items : 3, margin:20, }, 1024:{ items : 4, margin:28, } }, }); //rosetta $("#Main_Content").on('click','.rosetta_mark', function() { const Pos_No = $(this).attr("rosetta-id"); const queryID = $(this).attr("rosetta-query-id") || ''; const param = { type: 'click', target: Pos_No, }; if(queryID) { param.provider = 'rosetta'; param.source = queryID; } if(Pos_No && typeof rosetta == 'function') { rosetta('event',param); console.log('rosetta.event.click'); console.log(param); } }); var _window = $(window); var change = 0; var change_1023 = 0; var moreview = false; var imgviewbox = $('.imgviewbox'); var Slider_Main = $('.moreview').bxSlider({//系列小圖套件 mode: 'vertical', minSlides: 4, slideWidth: 95, infiniteLoop: false, hideControlOnEnd: true, slideMargin:7, speed:0 }); if(_window.width() > 0 && change != 1024 ){ change = 1024; moreview = true; $('.zoonbox').zoom({magnify:1,duration:450});//放大套件 smallPicBox(); // zoonbox(); videoBox(); }else if(_window.width() <= 960 && change!= 960){ change = 960; var model_pic = $('.productImg').owlCarousel({ loop : false, items : 1, nav : true, dots:true, }); var model_pic_n = $('.productImg .picbox').length; $('.videoButton').on('click', function(event) { model_pic.trigger('to.owl.carousel',model_pic_n-1); }); $('.productImg').on('changed.owl.carousel',function(e){ var num = e.item.index; if(document.getElementById("Video")){ var vid = document.getElementById("Video"); document.getElementById("Video").play(); } }); // imgviewbox.css('display','block'); $('.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').length; $('article .previewbox').css('display','block') .find('img').eq(nowitem).css('display','block'); /* 放大鏡點開圖片置中*/ $('.previewbox').scrollTop(800); $('.previewbox').scrollLeft(500); }); $('article').on('click','.close',function(){ $('article .previewbox').removeAttr('style') .find('img').removeAttr('style'); }); // _window.on('resize',function(){ // if( _window.width() > 0 && change != 1024 ){ // change = 1024; // moreview = true; // $('.productView .moreview').removeAttr('style'); // $.get('/products/ajax/detail/productView_pc.php',{sid:$(".addButton").attr("sid")}, function(data,status){ // $('.productView').html(data); // $('.zoonbox').zoom({magnify:1,duration:450});//放大套件 // Slider_Main.reloadSlider(); // moreview = true; // smallPicBox(); // videoBox(); // }); // $('.item-1').off('click','img'); // imgviewbox.off('click','.close'); // }else if(_window.width() <= 960 && change != 960){ // change = 960; // $.get('/products/ajax/detail/productView_moblie.php',{sid:$(".addButton").attr("sid")}, function(data,status){ // // Slider_Main.destroySlider(); // $('.productView').html(data) // var model_pic = $('.productImg').owlCarousel({ // loop : false, // items : 1, // nav : true, // dots:true, // }); // var model_pic_n = $('.productImg .picbox').length; // $('.videoButton').on('click', function(event) { // model_pic.trigger('to.owl.carousel',model_pic_n-1); // }); // $('.productImg').on('changed.owl.carousel',function(e){ // var num = e.item.index; // if(document.getElementById("Video")){ // if($(".productView").find(".owl-item").eq(num).find("#Video").attr("style")){ // $("#big_picture").hide(); // var vid = document.getElementById("Video"); // document.getElementById("Video").play(); // /*setInterval(function(){ // Video_Status = document.getElementById("Video").readyState; // if(Video_Status == 4){ // Video_Status = document.getElementById("Video").play(); // } // },3000);*/ // }else{ // $("#big_picture").show(); // document.getElementById("Video").pause(); // } // } // }); // }); // imgviewbox.css('display','block'); // $('.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(); // }); // }; // }); function smallPicBox(){ /* 小圖切換功能 */ $(".productView .moreview") .on('mouseover','.picitem', function() { var now = $(this).index(); $(".productView .picitem").removeClass('now'); $(this).addClass('now'); $(".productView .zoonbox").removeClass('now').eq(now).addClass('now'); }) } /*影片效果*/ 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); // }; //自動播放 var vid = document.getElementById("Video"); document.getElementById("Video").play(); // setInterval(function(){ // Video_Status = document.getElementById("Video").readyState; // if(Video_Status == 4){ // Video_Status = document.getElementById("Video").play(); // } // },3000); } } $(".table-buttonbox").on("click",".table-button",function(){ $(".table-button").removeClass('now'); $(this).addClass('now'); var type=$(this).data('type'); $(".tableBox").hide(); $("#Box-"+type).show(); $(".wear_report").show(); }); $(".table-buttonbox1").on("click",".table-button1",function(){ $(".table-button1").removeClass('now'); $(this).addClass('now'); var type=$(this).data('type'); $(".tableBox1").hide(); $("#Box1-"+type).show(); $(".wear_report").show(); }); //商品內容 var file_Obj = new prod_file({ type :'2', contBox:'productTitle', itemBox:'inner', picBox :'moreview', slider:Slider_Main, //定義在商品詳細頁 otherData:'&Special_Flag='+Special_Flag }); file_Obj.init(); }(jQuery)); $(document).ready(function(){ $(".productView").addClass("op"); }); $('.moreview').bxSlider({//系列小圖套件 mode: 'vertical', minSlides: 4, slideWidth: 95, infiniteLoop: false, hideControlOnEnd: true, slideMargin:7, speed:0 }); $("body").on("click", ".city-name", function() { $('.city-name').removeClass('open') $(this).addClass('open'); });