jQuery Help

[dr_tchock]

Okay so I'm writing a slideshow plugin for jQuery for use in a project (I know there's already loads of them, none are suitable).

It works fine for just one slideshow on a page but I need it to work for multiple slideshows. So, I'm attempting to write it as a plugin for jQuery but as a jQuery noob (I'm an AS3 dev) I'm getting stuck.

Here is the code



//You need an anonymous function to wrap around your function to avoid conflict
(function($){

//Attach this new method to jQuery
$.fn.extend({

//This is where you write your plugin's name
slideShow: function() {
var slideDiv = $(this);

//Iterate over the current set of matched elements
return this.each(function() {

var slides = $(slideDiv, 'li')

console.log(slides.length)

var numberOfSlides = slides.length;
var currentPos = 0;
// Remove scrollbar in JS
$(slideDiv).css({
'overflow': 'hidden'

}
);

// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>')
// Position one atop the other
.css({
position: 'absolute',
top: '0px'
});

for (i = 0; i < numberOfSlides; i++)
{
if (i != currentPos)
{
$(slides[i]).fadeOut(0)
}
}

// Add controls
$(slideDiv)
.append('<span class="control" id="minus">-</span>')
.append('<span class="control" id="plus">+</span>');

$(slideDiv)
.append('<p class="post-pagination"></p>');

addPageNumber()

// Add event listeners
$('#minus').bind('click', function() {

$(slides[currentPos]).fadeOut('5000');

if (currentPos != 0)
{
currentPos--;
}
else
{
currentPos = numberOfSlides-1;
}

$(slides[currentPos]).fadeIn('5000');

addPageNumber();

});

$('#plus').bind('click', function() {

$(slides[currentPos]).fadeOut('5000');

if (currentPos != numberOfSlides-1)
{
currentPos++;
}
else
{
currentPos = 0;
}

$(slides[currentPos]).fadeIn('5000');
addPageNumber();

});

function addPageNumber(){
$('.post-pagination').html((pad(currentPos+1, 2)) + ' out of ' + pad(numberOfSlides, 2));
}

function pad(number, length) {

var str = '' + number;
while (str.length < length) {
str = '0' + str;
}

return str;

}
});
}
});

//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )
})(jQuery);

the issue is with the line



var slides = $(slideDiv, 'li')
(where 'slideDiv' is the container div of that particular slideshow.)

Essentially, I just want to select all the 'li's in slideDiv to form that particular gallery. In the HTML, we just have a 'ul' with 'li's containing the images for the slideshow.

So, how do I select the 'li's in slideDiv? I know the rest of it works as I previously was just applying it to one div with slides as:



var slides = $('li')

[jwilliam]

It works on CSS selectors, so if the ul has an id of 'foo' you would do $('#foo li').

[dr_tchock]

fixed it by using



var slides = slideDiv.find('li');

[3dy]

Good!:)

[Roys]

Hi dr_tchock,

Its a late reply,
However, you can use following code for the same purpose, I believe.



var slides = $('li', slideDiv);
This is the syntax
$(selector, context)