[jQuery] Trying to get CrossSlide plugin to work
I'm trying to implement the CrossSlide plugin with Drupal and I'm not
having any luck. Based on some help I got from this group, I have
this code that sets a different banner depending on the URL in
script.js (at www.oregonpatrolservice.com):
Drupal.behaviors.setBanner = function (context) {
var img = {
'/content/about-us': 'images/OPS-Banner-02.jpg',
'/content/services': 'images/OPS-Banner-03.jpg',
'/content/ops-armory': 'images/OPS-Banner-04.jpg',
'/content/careers': 'images/OPS-Banner-07.jpg',
'/contact': 'images/OPS-Banner-08.jpg',
'/user': 'images/OPS-Banner-05.jpg'
}[location.pathname] || 'OPS-Banner-01.jpg';
$("td#header").css("background","url(/sites/all/themes/theme060/
images/" + img + ") no-repeat");
};
So I have the jquery.cross-slide.js file included in the header, and
this code in script.js:
Drupal.behaviors.crossSlideBanner = function (context) {
$('td#header').crossSlide({
sleep: 5, //in sec
fade: 2 //in sec
}, [
{ src: 'images/OPS-Banner-01.jpg'},
{ src: 'images/OPS-Banner-02.jpg'},
{ src: 'images/OPS-Banner-03.jpg'},
{ src: 'images/OPS-Banner-04.jpg'},
{ src: 'images/OPS-Banner-05.jpg'},
{ src: 'images/OPS-Banner-06.jpg'},
{ src: 'images/OPS-Banner-07.jpg'},
{ src: 'images/OPS-Banner-08.jpg'},
{ src: 'images/OPS-Banner-09.jpg'},
{ src: 'images/OPS-Banner-10.jpg'}
]);
};
But I get nothing displayed. The only thing I can think of is that my
original script sets the background property of td#header, where
CrossSlide replaces the content of td#header. Even so, it seems that
I should see something at least.
Can anyone tell me what I'm missing?
Thanks.
Steve