Need help with slideshow javascript!

[richmurphy]

I am taking over a project and this is the code that is currently being used for a "Featured Articles" homepage slideshow. The problem I am having is that the slideshow will not start, and the mouse-over and mouse-out effects are not executing properly. I have placed asterisks on the line in which I am getting the error. It is at the end of the script. I am getting ($ is not defined) error. Any help would be great as I have tried multiple solutions without success and am banging my head into a wall so to speak. :eek:



//SlideShow Class
//Class to manage HOSM-Style slideshow
//Slides are expected to be in the form of <li id="slideID"><a class="choice" href="#">Text</a><span class="divider">: </span><a class="spotlight"><img src="url" alt="alt text"></a></li>
//Members:
// - slides :
// - currentSlide :
// - maxSlide :
// - delay :
//Methods:
// - addSlide :
// - setDelay :
// - changeSlide :
// - reset :
// - jumpToSlide :
function SlideShow()
{
this.slides = new Array();
this.currentSlide = 0;
this.maxSlide = -1;
this.delay = 5; //Number of seconds per slide
}

//Returns page from the section
//Params:
// - id : HTML ID of the slide to add to the slideshow.
SlideShow.prototype.addSlide =
function(id)
{
var slide = $('#'+id);
if (this.maxSlide >= 0)
{
var prevSlide = this.slides[this.maxSlide].children('.spotlight');
slide.children('.spotlight').css({
'position' : 'absolute',
'top' : 0,
'left' : 0
});
}
else
{
slide.children('.spotlight').css({
'position' : 'absolute',
'top' : 0,
'left' : 0
});
}
this.slides.push(slide);
this.maxSlide++;
}

//Sets the delay for each slide in the slideshow
//Params:
// - delay : new delay for each slide in seconds
SlideShow.prototype.setDelay =
function(delay)
{
this.delay = delay;
}

//Changes the slide to the next on in the rotation. If at the last slide, start over.
SlideShow.prototype.changeSlide =
function()
{
this.slides[this.currentSlide].children('.spotlight').hide();
this.slides[this.currentSlide].children('.divider').hide();
this.slides[this.currentSlide].children('.choice').css('background-position', '0 0');
this.currentSlide++;
if (this.currentSlide > this.maxSlide)
{
this.reset();
return;
}
this.slides[this.currentSlide].children().show();
this.slides[this.currentSlide].children('.choice').css('background-position', '0 -58px');
}

//Resets the slideshow back to its first slide
SlideShow.prototype.reset =
function()
{
//Hide all slides after the first
for (var i = 1; i < this.currentSlide; i++)
{
this.slides[i].children('.spotlight').hide();
this.slides[i].children('.divider').hide();
}
//Reset slide counter
this.currentSlide = 0;
this.slides[this.currentSlide].children().show();
this.slides[this.currentSlide].children('.choice').css('background-position', '0 -58px');
}

//Jumps to a certain slide
//Params:
// - slideID : HTML ID of slide to jump to.
SlideShow.prototype.jumpToSlide =
function (slideID)
{
//Hide all slides
for (i = 0; i <= this.maxSlide; i++)
{
this.slides[i].children('.spotlight').hide();
this.slides[i].children('.divider').hide();
this.slides[i].children('.choice').css('background-position', '0 0');
}
//Set slide counter to given slide and make visible
for (var i = 0; i <= this.maxSlide; i++)
{
if (this.slides[i].attr('id') == slideID)
{
this.currentSlide = i;
this.slides[this.currentSlide].children().show();
this.slides[this.currentSlide].children('.choice').css('background-position', '0 -58px');
}
}
}

//Load up new slideshow
var slideshow = new SlideShow();

var isActive = 0;
var timeOut;

function start()
{
if (isActive == 0)
{
timeOut = setTimeout(changeSlide, slideshow.delay * 1000);
isActive = 1;
}
}

function changeSlide()
{
if (isActive == 1)
{
slideshow.changeSlide();
timeOut = setTimeout(changeSlide, slideshow.delay * 1000);
}
}

function pause()
{
if (isActive == 1)
{
clearTimeout(timeOut);
}
isActive = 0;
}

//Start Slideshow once the DOM is fully loaded
*******HERE******* $(document).ready = function () {
$('#mainpage').css('background-image', 'none');
slideshow.addSlide('choice1');
slideshow.addSlide('choice2');
slideshow.addSlide('choice3');
slideshow.addSlide('choice4');
slideshow.addSlide('choice5');
$('#mainpage li').each(function() { $(this).mouseover(function() { pause(); slideshow.jumpToSlide($(this).attr('id')); }); $(this).mouseout(function() { start(); }); });
slideshow.reset();
start(slideshow);
});

[vwphillips]

this script is relient a a framework(jQuery?)

function call $('#'+id); returns an object with the specified id

make sure the framework script has been loaded

as with many framework relient scripts it would be easier to use standard javascript to achieve the effect

[richmurphy]

Thank you so much! It turns out that I was using an older version of jQuery. Thank you for pinpointing that as the problem though! :D