I am new to jquery and my first post here, so any help would be great.
I am using jquery cycle to display images on my blog. I am having trouble getting each slideshow to behave independently. I have gotten the pager to work, but the prev/next buttons are giving me some real trouble. Here is my code:
- $(".slides").each(function() {
- var p = this.parentNode;
-
- $(this).after('<div class="pager">')
- $(this).cycle({
- fx: 'fade',
- pause: 0,
- timeout: 5000,
- prev: $('a.prev', p),
- next: $('a.next', p),
- pager: $('.pager', p),
- pagerAnchorBuilder: function(idx, slide) {
- return '<a href="#" ></a>';
- $(this)(".activeSlide", p).css("background-image", "url('images/gray_dot.png')");
- }
- });
- });
My HTML puts the forward and next buttons outside the slideshow div, but only because I can't find the best way to put them on either side of the pager div. Since they aren't inside that div, they don't respond using the variable p.
How do I get <a class="prev" href="#"></a> and <a class="next" href="#"></a> to be built dynamically before and after the pager divs, respectively?