From 57fd473874cb1da30813c9737b2f6b7eb62f30d7 Mon Sep 17 00:00:00 2001 From: Pete R Date: Wed, 6 Nov 2013 10:55:59 +0700 Subject: [PATCH] Add autoplay option --- README.md | 3 ++- demo/jquery.interactive_3d.js | 36 +++++++++++++++++++++++++------ demo/jquery.interactive_3d.min.js | 2 +- jquery.interactive_3d.js | 36 +++++++++++++++++++++++++------ jquery.interactive_3d.min.js | 2 +- 5 files changed, 64 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index e41260e..3ae370f 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,8 @@ Now call the function and that should be it. entrance: true, // Entrance Animation. Toggle this to false to turn it off. The default value is true. preloadImages: true, // Let the script preload all the frames on initial load. Toggle this to false to turn it off. The default value is true. touchSupport: true, // The script support touch events for mobile phones. If this interferes with your website behaviour, you can toggle this to false. The default value is true. - loading: "Loading.." // This only applies if preloadImages is true. This option let you show a loading indicator while the script is preloading the images. The option accepts HTML. Toggle this to false to turn this off. The default value is "Loading.." + loading: "Loading..", // This only applies if preloadImages is true. This option let you show a loading indicator while the script is preloading the images. The option accepts HTML. Toggle this to false to turn this off. The default value is "Loading.." + autoPlay: false // This option will superseded entrance option. The 3D object will start rotating automatically if autoPlay is not false. This option accepts the speed of the rotation in milliseconds delay. The default value is false. }); ```` diff --git a/demo/jquery.interactive_3d.js b/demo/jquery.interactive_3d.js index d7fc263..c3a52ce 100644 --- a/demo/jquery.interactive_3d.js +++ b/demo/jquery.interactive_3d.js @@ -20,7 +20,8 @@ entrance: true, preloadImages: true, touchSupport: true, - loading: "Loading.." + loading: "Loading..", + autoPlay: false }; function touchHandler(event) { @@ -123,7 +124,7 @@ el = $(this); el.find(" > img").addClass("main-frame"); el.drags(settings); - if (settings.entrance == true) { + if (settings.entrance == true && settings.autoPlay == false ) { var cur_frame = el.find("img.main-frame").attr("src").split('_')[1].split('.')[0]; var x = 0, @@ -151,12 +152,17 @@ } if (x++ < (settings.frames - 1)) { - setTimeout(animate_3d, (x * 1.5)); + if (settings.autoPlay != false) { + setTimeout(animate_3d, 0); + } else { + setTimeout(animate_3d, (x * 1.5)); + } + } } - if (settings.loading == false) animate_3d(); + if (settings.loading == false && settings.autoPlay == false) animate_3d(); } if (settings.touchSupport == true) { @@ -189,18 +195,36 @@ if (!count) { el.find(".main-frame").css("visibility", "visible"); el.find(".loading_3d").remove(); - animate_3d(); + if (settings.autoPlay == false) animate_3d(); } }); } else { el.find(".main-frame").css("visibility", "visible"); el.find(".loading_3d").remove(); - animate_3d(); + if (settings.autoPlay == false) animate_3d(); } } } + if (settings.autoPlay != false) { + + function intervalTrigger() { + return window.setInterval( function() { + animate_3d(); + }, settings.autoPlay ); + }; + + var id = intervalTrigger(); + + el.mouseenter(function() { + window.clearInterval(id); + }).mouseleave(function() { + id = intervalTrigger(); + }); + + } + } }(window.jQuery); diff --git a/demo/jquery.interactive_3d.min.js b/demo/jquery.interactive_3d.min.js index 3219dc8..f4b1671 100644 --- a/demo/jquery.interactive_3d.min.js +++ b/demo/jquery.interactive_3d.min.js @@ -1 +1 @@ -!function(e){function n(e){var t=e.changedTouches[0];var n=document.createEvent("MouseEvent");n.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],true,true,window,1,t.screenX,t.screenY,t.clientX,t.clientY,false,false,false,false,0,null);t.target.dispatchEvent(n)}var t={frames:10,cursor:"move",speed:0,entrance:true,preloadImages:true,touchSupport:true,loading:"Loading.."};e.fn.preload=function(t){e("
").hide().appendTo(t);this.each(function(){e("").attr("src",this).appendTo(".images_cache")})};e.fn.drags=function(t){var n=this;return n.css("cursor",t.cursor).on("mousedown",function(r){var i=e(this).addClass("draggable"),s=r.pageX,o={};i.parents().on("mousemove",function(r){if(e(".draggable").length>0){var i=n.find("img.main-frame").attr("src"),s=i.split("/")[i.split("/").length-1],u=s.split("_")[1].split(".")[0];if(typeof o.x!="undefined"){var a=o.x-r.clientX,f=o.y-r.clientY;if(Math.abs(a)>Math.abs(f)&&a>0){if(u>1){setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var t=i.split("/").slice(0,-1).join("/");var r=t+"/"+e.split("_")[0]+"_"+(parseInt(u)-1)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",r)},t.speed)}else{setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var r=i.split("/").slice(0,-1).join("/");var s=r+"/"+e.split("_")[0]+"_"+parseInt(t.frames)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",s)},t.speed)}}else if(Math.abs(a)>Math.abs(f)&&a<0){if(u img").addClass("main-frame");s.drags(i);if(i.entrance==true){var o=s.find("img.main-frame").attr("src").split("_")[1].split(".")[0];var u=0,a=100/parseInt(i.frames);function f(){var e=s.find("img.main-frame").attr("src");s.find("img.main-frame").css("opacity",u*a/100);if(o img").not(function(){return this.complete});var v=d.length;s.append("
"+i.loading+"
");s.find(".main-frame").css("visibility","hidden");if(v){d.load(function(){v--;if(!v){s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();f()}})}else{s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();f()}}}}}(window.jQuery) \ No newline at end of file +!function(e){function n(e){var t=e.changedTouches[0];var n=document.createEvent("MouseEvent");n.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],true,true,window,1,t.screenX,t.screenY,t.clientX,t.clientY,false,false,false,false,0,null);t.target.dispatchEvent(n)}var t={frames:10,cursor:"move",speed:0,entrance:true,preloadImages:true,touchSupport:true,loading:"Loading..",autoPlay:false};e.fn.preload=function(t){e("
").hide().appendTo(t);this.each(function(){e("").attr("src",this).appendTo(".images_cache")})};e.fn.drags=function(t){var n=this;return n.css("cursor",t.cursor).on("mousedown",function(r){var i=e(this).addClass("draggable"),s=r.pageX,o={};i.parents().on("mousemove",function(r){if(e(".draggable").length>0){var i=n.find("img.main-frame").attr("src"),s=i.split("/")[i.split("/").length-1],u=s.split("_")[1].split(".")[0];if(typeof o.x!="undefined"){var a=o.x-r.clientX,f=o.y-r.clientY;if(Math.abs(a)>Math.abs(f)&&a>0){if(u>1){setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var t=i.split("/").slice(0,-1).join("/");var r=t+"/"+e.split("_")[0]+"_"+(parseInt(u)-1)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",r)},t.speed)}else{setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var r=i.split("/").slice(0,-1).join("/");var s=r+"/"+e.split("_")[0]+"_"+parseInt(t.frames)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",s)},t.speed)}}else if(Math.abs(a)>Math.abs(f)&&a<0){if(u img").addClass("main-frame");s.drags(i);if(i.entrance==true&&i.autoPlay==false){var o=s.find("img.main-frame").attr("src").split("_")[1].split(".")[0];var u=0,a=100/parseInt(i.frames);function f(){var e=s.find("img.main-frame").attr("src");s.find("img.main-frame").css("opacity",u*a/100);if(o img").not(function(){return this.complete});var v=d.length;s.append("
"+i.loading+"
");s.find(".main-frame").css("visibility","hidden");if(v){d.load(function(){v--;if(!v){s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();if(i.autoPlay==false)f()}})}else{s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();if(i.autoPlay==false)f()}}}if(i.autoPlay!=false){function m(){return window.setInterval(function(){f()},i.autoPlay)}var g=m();s.mouseenter(function(){window.clearInterval(g)}).mouseleave(function(){g=m()})}}}(window.jQuery) \ No newline at end of file diff --git a/jquery.interactive_3d.js b/jquery.interactive_3d.js index d7fc263..c3a52ce 100644 --- a/jquery.interactive_3d.js +++ b/jquery.interactive_3d.js @@ -20,7 +20,8 @@ entrance: true, preloadImages: true, touchSupport: true, - loading: "Loading.." + loading: "Loading..", + autoPlay: false }; function touchHandler(event) { @@ -123,7 +124,7 @@ el = $(this); el.find(" > img").addClass("main-frame"); el.drags(settings); - if (settings.entrance == true) { + if (settings.entrance == true && settings.autoPlay == false ) { var cur_frame = el.find("img.main-frame").attr("src").split('_')[1].split('.')[0]; var x = 0, @@ -151,12 +152,17 @@ } if (x++ < (settings.frames - 1)) { - setTimeout(animate_3d, (x * 1.5)); + if (settings.autoPlay != false) { + setTimeout(animate_3d, 0); + } else { + setTimeout(animate_3d, (x * 1.5)); + } + } } - if (settings.loading == false) animate_3d(); + if (settings.loading == false && settings.autoPlay == false) animate_3d(); } if (settings.touchSupport == true) { @@ -189,18 +195,36 @@ if (!count) { el.find(".main-frame").css("visibility", "visible"); el.find(".loading_3d").remove(); - animate_3d(); + if (settings.autoPlay == false) animate_3d(); } }); } else { el.find(".main-frame").css("visibility", "visible"); el.find(".loading_3d").remove(); - animate_3d(); + if (settings.autoPlay == false) animate_3d(); } } } + if (settings.autoPlay != false) { + + function intervalTrigger() { + return window.setInterval( function() { + animate_3d(); + }, settings.autoPlay ); + }; + + var id = intervalTrigger(); + + el.mouseenter(function() { + window.clearInterval(id); + }).mouseleave(function() { + id = intervalTrigger(); + }); + + } + } }(window.jQuery); diff --git a/jquery.interactive_3d.min.js b/jquery.interactive_3d.min.js index 3219dc8..f4b1671 100644 --- a/jquery.interactive_3d.min.js +++ b/jquery.interactive_3d.min.js @@ -1 +1 @@ -!function(e){function n(e){var t=e.changedTouches[0];var n=document.createEvent("MouseEvent");n.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],true,true,window,1,t.screenX,t.screenY,t.clientX,t.clientY,false,false,false,false,0,null);t.target.dispatchEvent(n)}var t={frames:10,cursor:"move",speed:0,entrance:true,preloadImages:true,touchSupport:true,loading:"Loading.."};e.fn.preload=function(t){e("
").hide().appendTo(t);this.each(function(){e("").attr("src",this).appendTo(".images_cache")})};e.fn.drags=function(t){var n=this;return n.css("cursor",t.cursor).on("mousedown",function(r){var i=e(this).addClass("draggable"),s=r.pageX,o={};i.parents().on("mousemove",function(r){if(e(".draggable").length>0){var i=n.find("img.main-frame").attr("src"),s=i.split("/")[i.split("/").length-1],u=s.split("_")[1].split(".")[0];if(typeof o.x!="undefined"){var a=o.x-r.clientX,f=o.y-r.clientY;if(Math.abs(a)>Math.abs(f)&&a>0){if(u>1){setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var t=i.split("/").slice(0,-1).join("/");var r=t+"/"+e.split("_")[0]+"_"+(parseInt(u)-1)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",r)},t.speed)}else{setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var r=i.split("/").slice(0,-1).join("/");var s=r+"/"+e.split("_")[0]+"_"+parseInt(t.frames)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",s)},t.speed)}}else if(Math.abs(a)>Math.abs(f)&&a<0){if(u img").addClass("main-frame");s.drags(i);if(i.entrance==true){var o=s.find("img.main-frame").attr("src").split("_")[1].split(".")[0];var u=0,a=100/parseInt(i.frames);function f(){var e=s.find("img.main-frame").attr("src");s.find("img.main-frame").css("opacity",u*a/100);if(o img").not(function(){return this.complete});var v=d.length;s.append("
"+i.loading+"
");s.find(".main-frame").css("visibility","hidden");if(v){d.load(function(){v--;if(!v){s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();f()}})}else{s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();f()}}}}}(window.jQuery) \ No newline at end of file +!function(e){function n(e){var t=e.changedTouches[0];var n=document.createEvent("MouseEvent");n.initMouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[e.type],true,true,window,1,t.screenX,t.screenY,t.clientX,t.clientY,false,false,false,false,0,null);t.target.dispatchEvent(n)}var t={frames:10,cursor:"move",speed:0,entrance:true,preloadImages:true,touchSupport:true,loading:"Loading..",autoPlay:false};e.fn.preload=function(t){e("
").hide().appendTo(t);this.each(function(){e("").attr("src",this).appendTo(".images_cache")})};e.fn.drags=function(t){var n=this;return n.css("cursor",t.cursor).on("mousedown",function(r){var i=e(this).addClass("draggable"),s=r.pageX,o={};i.parents().on("mousemove",function(r){if(e(".draggable").length>0){var i=n.find("img.main-frame").attr("src"),s=i.split("/")[i.split("/").length-1],u=s.split("_")[1].split(".")[0];if(typeof o.x!="undefined"){var a=o.x-r.clientX,f=o.y-r.clientY;if(Math.abs(a)>Math.abs(f)&&a>0){if(u>1){setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var t=i.split("/").slice(0,-1).join("/");var r=t+"/"+e.split("_")[0]+"_"+(parseInt(u)-1)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",r)},t.speed)}else{setTimeout(function(){var e=i.split("/")[i.split("/").length-1];var r=i.split("/").slice(0,-1).join("/");var s=r+"/"+e.split("_")[0]+"_"+parseInt(t.frames)+"."+e.split(".")[1];n.find("img.main-frame").attr("src",s)},t.speed)}}else if(Math.abs(a)>Math.abs(f)&&a<0){if(u img").addClass("main-frame");s.drags(i);if(i.entrance==true&&i.autoPlay==false){var o=s.find("img.main-frame").attr("src").split("_")[1].split(".")[0];var u=0,a=100/parseInt(i.frames);function f(){var e=s.find("img.main-frame").attr("src");s.find("img.main-frame").css("opacity",u*a/100);if(o img").not(function(){return this.complete});var v=d.length;s.append("
"+i.loading+"
");s.find(".main-frame").css("visibility","hidden");if(v){d.load(function(){v--;if(!v){s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();if(i.autoPlay==false)f()}})}else{s.find(".main-frame").css("visibility","visible");s.find(".loading_3d").remove();if(i.autoPlay==false)f()}}}if(i.autoPlay!=false){function m(){return window.setInterval(function(){f()},i.autoPlay)}var g=m();s.mouseenter(function(){window.clearInterval(g)}).mouseleave(function(){g=m()})}}}(window.jQuery) \ No newline at end of file