On Feb 12, 8:55 pm, Shane Riley <shanerileydoti...@gmail.com> wrote:
> I've got a project where I've got two slideshows on one page, and
> they're identical markup. Instead of adding IDs to each and making two
> separate cycle references, I wanted to attach the next and previous
> slide events on two specific links grouped with the slideshow
> container. I'm wondering either how I'm supposed to fire the next or
> previous slide event or how to traverse back to the proper links
> without an ID.
>
> As an example, here's what I've got for HTML:
> <div class="slideshow">
> <h2>Events</h2>
> <p class="controls"><a href="#"><
> Prev</a> | <a href="#">Next
> ></a></p>
> <ul>
> <li>
> <img
> src="./images/img_sample.gif" alt="Sample" />
> <div class="details">
> <h3><a
> href="#">Event title</a></h3>
> <p>When:
> <strong>Date</strong><br />
> Where:
> <strong>Location Name</strong></p>
> <p>Lorem
> ipsum cu tempor laboramus quo, vim quem voluptua
> expetenda ad. Per ei dicam noluisse, ne his elit populo meliore, veri
> dicta quo ad.</p>
> <p><a
> href="#">Learn more...</a></p>
> </div>
> </li>
> <li>
> <img
> src="./images/img_sample.gif" alt="Sample" />
> <div class="details">
> <h3><a
> href="#">Event title</a></h3>
> <p>When:
> <strong>Date</strong><br />
> Where:
> <strong>Location Name</strong></p>
> <p>Lorem
> ipsum cu tempor laboramus quo, vim quem voluptua
> expetenda ad. Per ei dicam noluisse, ne his elit populo meliore, veri
> dicta quo ad.</p>
> <p><a
> href="#">Learn more...</a></p>
> </div>
> </li>
> </ul>
> </div>
>
> I have two of these on the page. What I want to do is something like
> this:
> $("p.controls a:first-child").click(function()
> {
> $(this).parent().next().cycle("prev");
> return false;
> });
> $("p.controls a:last-child").click(function()
> {
> $(this).parent().next().cycle("next");
> return false;
> });
> $(".slideshow ul").cycle(
> {
> fx: "fade",
> speed: 500,
> timeout: 0
> });
>
> Is there a way to actually do this, or am I stuck using IDs?
If you add classes to those anchors I think you could do something
like this:
$('.slideshow ul').each(function() {
var $this = $(this);
$this.cycle({
// ...
prev: $(this).prev('p').find('a.prev');
next: $(this).prev('p').find('a.next');
});
});
