jQuery Cycle pager function using existing thumbnails for navigation

I'm working on a portfolio site for my wife's lighting design business. The jQuery cycle plugin seems to provide the functionality I want, but even after reviewing the examples on Mike Alsup's site, I'm stumped. Really, I just don't have the background with JavaScript to pull this off myself.

I want to build a slideshow, controlled with a pager function, using thumbnails for navigation. The main slides and the thumbnails are totally different aspect ratios (to maintain the layout), so I can't use cycle to generate the thumbnails for me. The slides include an image and a caption. I'd like to preserve as much of the existing markup as possible.

Here is the slideshow content:

<div id="slideshow" />
        <div class="first">
            <img src="../_/img/projects/shootingstar-1.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-2.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-3.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-4.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>
        <div>
            <img src="../_/img/projects/shootingstar-5.jpg" alt="" />
            <p class="credit">caption here</p>
        </div>

Here is the thumbnail/navigation content. I tried to use a consistent naming convention for the images:

<div id="slidenav">
        <li><a href="#"><img src="../_/img/projects/shootingstar-1t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-2t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-3t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-4t.jpg" alt="" /></a></li>
        <li><a href="#"><img src="../_/img/projects/shootingstar-5t.jpg" alt="" /></a></li>
    </div>

And finally, my styling, in case that is helpful in some way:

#slidenav {display: block; float: right; width: 200px;}
#slidenav li {list-style: none; float: left;}
#slidenav li img {padding: 2px; border: 1px soli开发者_运维百科d #999; margin: 0 0 8px 8px;}
#projectcopy {display: block; float: right; width: 220px;}
#projectcopy p {font-size: 12px; color: #666; line-height: 16px; margin: 0 10px 20px 16px; text-align: right;}
#projectcopy ul {list-style: none; margin: 0 10px 20px 16px;}
 #projectcopy ul li {font-size: 11px; color: #666; line-height: 14px;  text-align: right; margin-bottom: 10px;}

I have an example posted here:

http://pritchardlighting.com/nova/portfolio/sample-project.html

You can see that I currently just have a simple cycle set up on the slides. Please ignore the mess. Obviously, this is still in dev.

I would really appreciate any help. This has to be something that others have tried to do. I'm just having a hard time making my way through the examples I've seen so far. They all assume (rightly so) a baseline understanding of JS that I just don't possess.

---

please refer to this demo to have your question answered:

---

1. remove all divs you have wrapped around your content to cycle (the child elements of div#slideshow. they prevent cycle from working as the script cycles everything within ONE div).
2. remove p.credit for the same reason. otherwise the script cycles it and you run into trouble if you have no matching thumbnail (see 3.)
3. make sure, the number of thumbnails {*t.jpg} matches precisely the number of img in {div#slideshow}. thats the point that makes it work. mismatch leads to a non working script.
4. use exactly the jquery markup from the demo and replace {pager: '#nav',} with {pager: '#slidenav',}

if still not working check with firebug if the script loads. if yes, try first to make the cycle {div#slideshow} running before you move forward to the linked thumbnails.