OK, there were no takers on this. In the unlikely event that anyone's
interested, here's the work-around that I arrived at. It's simple enough
that I think it will not cause me any problems, but I sure would like to
know what the "right" solution might be.
In the HTML, an image collection like this:
<div id="cycleport">
<img class="cimg" src="images/1.jpg" alt ="" />
<img class="cimg" src="images/2.jpg" alt ="" />
<img class="cimg" src="images/3.jpg" alt ="" />
<img class="cimg" src="images/4.jpg" alt ="" />
<img class="cimg" src="images/5.jpg" alt ="" />
<img class="cimg" src="images/6.jpg" alt ="" />
</div>
using cycle, I navigate this collection with prev/next links, but I also
wanted to provide a drop-down list allowing the user to jump straight to
specific images and then go prev/next from there.
<ul id="clientList">
<li><a href="#">Foo text</a></li>
<li><a href="#">Bar text</a></li>
<li><a href="#">Baz text</a></li>
</ul>
My solution (a very unsatisfying kluge) was to simply add empty, dummy
lines to the list thus:
<ul id="clientList">
<li class="noshow"></li>
<li><a href="#">Foo text</a></li>
<li class="noshow"></li>
<li class="noshow"></li>
<li><a href="#">Bar text</a></li>
<li><a href="#">Baz text</a></li>
</ul>
to allow the user to go directly to 2.jpg, 5.jpg, and 6.jpg by choosing
from the list and using a cycle call like this:
$('#cycleport').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: swapText,
pager: '#clientList',
pagerAnchorBuilder: function(idx, slide) {
return '#clientList li:eq(' + (idx) + ') a';
}
});
If anybody has a cleaner solution, I'd sure love to know about it.
Jon
