[jQuery] Creating a reusable Cycle plugin powered slideshow
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>
<ul>
<li>
<img src="./images/img_sample.gif" alt="Sample" />
<div class="details">
<h3><a href="#">Event title</a></h3>
When: <strong>Date</strong><br />
Where: <strong>Location Name</strong>
Lorem ipsum cu tempor laboramus quo, vim quem voluptua
expetenda ad. Per ei dicam noluisse, ne his elit populo meliore, veri
dicta quo ad.
<a href="#">Learn more...</a>
</div>
</li>
<li>
<img src="./images/img_sample.gif" alt="Sample" />
<div class="details">
<h3><a href="#">Event title</a></h3>
When: <strong>Date</strong><br />
Where: <strong>Location Name</strong>
Lorem ipsum cu tempor laboramus quo, vim quem voluptua
expetenda ad. Per ei dicam noluisse, ne his elit populo meliore, veri
dicta quo ad.
<a href="#">Learn more...</a>
</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?
Topic Participants
shanerileydotinfo
malsup