Hi, Could someone help me with my problem: I have a site that I made in Dreamweaver using a Business Catalyst template called Adora, and there is a slidehow called AnythingSlider. The slider has a Swing effect that swings pictures and I would like to change that into Fade effect. Now I have no knowledge of jquery. Script on the Template looks like this: <script type="text/javascript" src="/js/jquery.anythingslider.js"></script> <script type="text/javascript"> $(function(){ $('#slider1').anythingSlider({ startStopped : false, // If autoPlay is on, this can force it to start stopped hashTags : false, toggleArrows : false, buildArrows : false, enablePlay : true, // if false, the play/stop button will still be visible, but not clickable. autoPlayLocked : false, // If true, user changing slides will not stop the slideshow resumeDelay : 10000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin delay : 4000, // How long between slideshow transitions in AutoPlay mode (in milliseconds) animationTime : 900, // How long the slideshow transition takes (in milliseconds) onSlideComplete : function(slider){ // alert('Welcome to Slide #' + slider.currentPage); } }); }); </script> It says there: Anything other than "linear" or "swing" requires the easing plugin, and I have found several different plugins, copyed the js file to my site, linked it to my Template file (<script type="text/javascript" src="/js/jquery.easing.js"></script>,) changed the easing "swing" to whatever I have found in the plugin js file, like "easeOutQuad". But I cannot get it to work. Could anyone help me out here and tell me what am I doing wrong? Thanks in advange!
Hi, I changed the "easing : "swing"," to that but the slideshow stopped working, now nothing moves.... The easing.js that I have linked in my template is: * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
Not the easing "mode" : "fade", "easing" : "swing" see here I added mode, easing should be left as it is
Ok. Tryid that, didn´t work. Now the slider works, but just like before... it swings the images instead of fading them. I don´t get it... Now the code is: mode : "fade", easing : "swing", Should I do some changes in the "jquery.anythingslider.js" file? The easing.js file has this kind of script line: jQuery.extend( jQuery.easing, { def: 'easeOutQuad', swing: function (x, t, b, c, d) { //alert(jQuery.easing.default); return jQuery.easing[jQuery.easing.def](x, t, b, c, d); }, easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, This is all hebrew to me...
Yes, thanks for having the time. the jquery.anythingslider.js is too long for here... jquery.easing.js: <code>/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */ // t: current time, b: begInnIng value, c: change In value, d: duration jQuery.easing['jswing'] = jQuery.easing['swing']; jQuery.extend( jQuery.easing, { def: 'easeOutQuad', swing: function (x, t, b, c, d) { //alert(jQuery.easing.default); return jQuery.easing[jQuery.easing.def](x, t, b, c, d); }, easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInCubic: function (x, t, b, c, d) { return c*(t/=d)*t*t + b; }, easeOutCubic: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }, easeInOutCubic: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; }, easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }, easeOutQuart: function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOutQuart: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; }, easeInQuint: function (x, t, b, c, d) { return c*(t/=d)*t*t*t*t + b; }, easeOutQuint: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; }, easeInSine: function (x, t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOutSine: function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOutSine: function (x, t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }, easeInExpo: function (x, t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOutExpo: function (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }, easeInCirc: function (x, t, b, c, d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOutCirc: function (x, t, b, c, d) { return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOutCirc: function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }, easeInElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, easeInOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }, easeInBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, easeInBounce: function (x, t, b, c, d) { return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; }, easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOutBounce: function (x, t, b, c, d) { if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; } }); /* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */</code>
AND Homepage.dwt: <code> <!DOCTYPE HTML> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" /> <!-- TemplateBeginEditable name="doctitle" --><title></title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> <link rel="stylesheet" href="/css/style.css" type="text/css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.js"></script> <script type="text/javascript" src="/js/jquery.easing.js"></script> <script type="text/javascript" src="/js/custom.js"></script> <script type="text/javascript" src="/js/jtwt.js"></script> <script type="text/javascript" src="/js/hoverIntent.js"></script> <script type="text/javascript" src="/js/superfish.js"></script> <!-- Anything Slider --> <link rel="stylesheet" href="/css/anythingslider.css" type="text/css" media="screen" /> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="/css/anythingsliderie.css" /> <![endif]--> </head> <body> <div id="header"> <div id="header-gradient-background"> <div id="header-noise"> <div id="top-bar"> <div id="top-bar-inside"> <div id="logo"> <div class="logobox-bl"> <div class="logobox-br"> <a href="/"><img src="/images/logo.png" /></a> </div> </div> </div> <!-- close #logo --> <div class="user"> {module_whosloggedin} </div> <div class="account"> <a href="/myaccount">My Account</a> </div> <span class="email"> <a href="/contact"><img alt="" src="/images/email.png" /> E-mail</a> </span> <img alt="" src="/images/phone.png" /> 1 (800) 555-2121 </div> </div> <!-- close #top-bar --> <!-- BEGIN AnythingSlider Content --> <div id="anythingslidercontainer"> <div id="anythingslidersubcontainer"> <div id="anythingslidersub"> <ul id="slider1"> {module_webapps,7119,l} </ul> </div> </div> </div> <!-- Anything Slider JavaScript --> <script type="text/javascript" src="/js/jquery.anythingslider.js"></script> <script type="text/javascript"> $(function(){ $('#slider1').anythingSlider({ startStopped : false, // If autoPlay is on, this can force it to start stopped hashTags : false, toggleArrows : false, buildArrows : false, enablePlay : true, // if false, the play/stop button will still be visible, but not clickable. autoPlayLocked : false, // If true, user changing slides will not stop the slideshow resumeDelay : 10000, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). mode : "fade", easing : "swing", // Anything other than "linear" or "swing" requires the easing plugin delay : 4000, // How long between slideshow transitions in AutoPlay mode (in milliseconds) animationTime : 900, // How long the slideshow transition takes (in milliseconds) onSlideComplete : function(slider){ // alert('Welcome to Slide #' + slider.currentPage); } }); }); </script> <!-- END AnythingSlider --> </code>
I noticed this at the bottom of Anythingslider: /* AnythingSlider works with works with jQuery 1.4+, but you can uncomment the code below to make it work with jQuery 1.3.2. You'll have to manually add the code below to the minified copy if needed */ /* // Copied from jQuery 1.4.4 to make AnythingSlider backwards compatible to jQuery 1.3.2 if (typeof jQuery.fn.delay === 'undefined') { jQuery.fn.extend({ delay: function( time, type ) { time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; type = type || "fx"; return this.queue( type, function() { var elem = this; setTimeout(function() { jQuery.dequeue( elem, type ); }, time ); }); } }); } */ Could this be affecting?
Well you can update to latest version of jQuery and test if it is working or not. BTW, I don't see anythingslider.js included in html document. Have you uploaded it somewhere? It will be easier to check if it is hosted somewhere.
New address: http://tkqvah.businesscatalyst.com There is a js folder where the jquery.anythingslider.js is.
I checked anythingslider looks like the new versions has changed, if you check here http://70. 39. 144. 254/diablo_dev/dynamic/templates/diablosport/resources/js/anythingslider/demos.htm Demo 2, it might help
Thank you for your help but I don´t understand what to do with that. I found one newer js file and replaced the old jquery.anythingslider.js with it earlier, and the whole thing stopped working. ...I don´t know... can the fade effect really be this difficult... I would have imagined that fade effect is the easiest to accomplish...