Hi all. Today's question is: Has anybody set up the InnerFade plugin (jQuery-JavaScript-Library) in a SilverStripe site? This is a very useful effect that gets around using Flash for a simple image slideshow. I set it up no probs in HTML CSS but I'm a bit stuck in SS...

www.medienfreunde.com/lab/innerfade

$ is not defined
[Break On This Error] $(document).ready( 

... which is where it falls over and dies...

I've put the JavaScript component in the mysite/javascript directory and am using

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>
<% require javascript(mysite/javascript/jquery.js) %>
<% require javascript(mysite/javascript/jquery.innerfade.js) %>

... but these don't even appear in the parsed page now!

Any takers?

According to Firebug this is the problem area... it's just I have no idea how to 'define' the 'args'

nodeName(object=[function()], callback=function(), args=undefined)jquery.js (line 22)
object = [function()]
callback = function()
args = undefined

Line 22

for(var i=0,length=object.length,value=object[0];i<length&&callback.call(value,i,value)!==false;value=object[++i]){}}return object;},prop:function(elem,value,type,i,name){if(jQuery.isFunction(value))value=value.call(elem,i);return value&&value.constructor==Number&&type=="curCSS"&&!exclude.test(name)?value+"px":value;},className:{add:function(elem,classNames){jQuery.each((classNames||"").split(/\s+/),function(i,className){if(elem.nodeType==1&&!jQuery.className.has(elem.className,className))elem.className+=(elem.className?" ":"")+className;});},remove:function(elem,classNames){if(elem.nodeType==1)elem.className=classNames!=undefined?jQuery.grep(elem.className.split(/\s+/),function(className){return!jQuery.className.has(classNames,className);}).join(" "):"";},has:function(elem,className){return jQuery.inArray(className,(elem.className||elem).toString().split(/\s+/))>-1;}},swap:function(elem,options,callback){var old={};for(var name in options){old[name]=elem.style[name];elem.style[name]=options[name];}callback.call(elem);for(var name in options)elem.style[name]=old[name];},css:function(elem,name,force){if(name=="width"||name=="height"){var val,props={position:"absolute",visibility:"hidden",display:"block"},which=name=="width"?["Left","Right"]:["Top","Bottom"];function getWH(){val=name=="width"?elem.offsetWidth:elem.offsetHeight;var padding=0,border=0;jQuery.each(which,function(){padding+=parseFloat(jQuery.curCSS(elem,"padding"+this,true))||0;border+=parseFloat(jQuery.curCSS(elem,"border"+this+"Width",true))||0;});val-=Math.round(padding+border);}if(jQuery(elem).is(":visible"))getWH();else

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>
<% require javascript(mysite/javascript/jquery.js) %>

You should only include 1 version of jQuery. I recommend the sapphire version as then you'll seamlessy be able to integrate other modules like forum, user forms.

Hi Will... Yes I had tried this as well, still getting the same error

$("ul#slideshow") is null
• $('ul#slideshow').innerfade({

For some reason when I use

<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>

that script is not loaded when I view source?