View full-size image using Cycle plugin

View full-size image using Cycle plugin

Aloha!
I thought a nice feature to have with the Cycle plugin would be a link or button that allows you to view a larger size or detail image of whichever image is currently being viewed. In my implementation, I am also using the overlay feature of the jQuery Tools plugin to display the larger image, no conflict.

The issue I'm having is that, while the overall functionality works as expected, attempting to launch an overlay of a larger, detail image that corresponds to the relevant image in the Cycle viewer is tripping me up.


My code:

jQuery
  1. $(function() {
  2.     $('#gallery).cycle({
  3.         fx: 'scrollRight',
  4.         next: '#gallery,#next',
  5.         timeout: 0,
  6.         after: onAfter
  7.     });
  8. });
  9. function onAfter(curr,next,opts) {
  10.     var caption = opts.currSlide + 1;
  11.      $('#detail').attr({ rel: 'p'+caption });
  12. }

HTML
  1. <a id="detail">[ view full-size ]</a> <a id="next">[ next ]</a>
  2. <div id="gallery">
  3.     <div class="panel">
  4.         <img alt="downtown with belle" src="img/belle.jpg" width="250" height="150" />
  5.     </div>
  6.     <div class="panel">
  7.         <img alt="piloting the skies" src="img/chopper.jpg" width="250" height="150" />
  8.     </div>
  9. ...
  10. </div>
...and the overlays:
  1. <div class="overlay" id="p1"><img alt="downtown with belle" src="img/lg-belle.jpg" width="640" height="457" /></div>
  2. <div class="overlay" id="p2"><img alt="piloting the skies" src="img/lg-chopper.jpg" width="640" height="457" /></div>


I would think that the 'rel' attribute would get added to our #detail link and that value would change depending on the present slide. I'm sure that there is an effective way of doing this. It's on the tip of my tongue, as they say. After so many hours, it's definitely time to share it and get some feed back. Some new eyeballs on it, figuratively and literally.

Cheers in advance for any insight!

Ps. I gave this a wrangle, trying to populate the innerHTML of a span with the #detail link html and rel attribute, but still no magic beans... even though it does update the html correctly when the slide is advanced!

  1. HTML:    <span id="caption"></span>
  2. jQuery:   $('#caption').html("<a id='detail' rel='#p" + caption+ "'>[ view full-size ]</a>");


----
Here's a little background info for reference, if necessary:

http://malsup.com/jquery/cycle/int2.html
- specifically the manual advance 'next' transition and the 'onAfter' callback to grab the order of the image.

Tried many things, but figured at its most basic this would do the trick:
http://api.jquery.com/attr/
- to populate the value of the 'rel' attribute of my anchor link with the order number (preceded by a string value, non-integer) that was returned by the onAfter method.

Overlay: