Try this: after: function(curr, next, opts) { var alt = $(next).find('img').attr('alt'); $('#caption').html(alt); }
On Nov 22, 12:12 am, Wroathe <reallyto...@gmail.com> wrote: > You're on the right track!!! I added an alt attribute to the > first .featured-image and it displayed exactly where I wanted it!!! > The question is now how to select the img tag nested in it (in the > interest of writing valid xhtml). > > On Nov 21, 11:06 pm, Wroathe <reallyto...@gmail.com> wrote: > > > I tried it and it didn't work Mike. I did a console.log of the alt > > variable afterwards and it was tossing undefined. I think this is > > because I have all of the slides wrapped in divs. I'm not sure how to > > remedy that problem. Is there a way of selecting the img's alt > > attribute using the code you just gave me? > > > Sorry. I was a designer before dabbling in development. I still have a > > lot to learn. > > > Thanks again! > > > On Nov 21, 10:58 pm, Wroathe <reallyto...@gmail.com> wrote: > > > > I'll give that try and see how it works - thanks in advance for the > > > reply. I really appreciate it. > > > > On Nov 21, 7:01 pm, Mike Alsup <mal...@gmail.com> wrote: > > > > > Try using the 'after' callback: > > > > > $(function() { > > > > $('div#slides').cycle({ > > > > timeout: 7000, > > > > pause: 1, > > > > pager: 'div#buttons', > > > > pagerAnchorBuilder: function(idx) { > > > > return '<a id="pager-' + idx + '" href="#">' + idx + '</ > > > > a>'; > > > > }, > > > > after: function(curr, next, opts) { > > > > var alt = $(next).attr('alt'); > > > > $('#caption').html(alt); > > > > } > > > > }); > > > > > }); > > > > > On Nov 21, 6:36 pm, Wroathe <reallyto...@gmail.com> wrote: > > > > > > Hi there! I'm a little stuck and I was hoping someone could help me. > > > > > I've been trying to add captions to another div separate from the > > > > > slideshow and have them cycle with the slideshow and when the user > > > > > uses the pager. The one catch is I was hoping to use the images in the > > > > > slideshow's alt attributes as the captions. Here's the code, it'll do > > > > > a better job of explaining than I can. > > > > > > The JS is as follows: > > > > > $(function() { > > > > > $('div#slides').cycle({ > > > > > timeout: 7000, > > > > > pause: 1, > > > > > pager: 'div#buttons', > > > > > pagerAnchorBuilder: function(idx) { > > > > > return '<a id="pager-' + idx + '" href="#">' + idx + > > > > > '</a>'; > > > > > } > > > > > }); > > > > > > }); > > > > > > The container I specified to contain the captions is > > > > > <div id="buttons">Pager anchors are here.</div> > > > > > <div id="captions"><span>Alt attribute would go here.</span></div> > > > > > > The slideshow div looks like this > > > > > > <div id="slides"> > > > > > <div class="featured-image"><a href="slide1.html"><img > > > > > src="images/image1.jpg" alt="This alt should be displayed as a caption > > > > > in #captions." height="300px" width="940px" /></a></div> > > > > > <div class="featured-image"><a href="slide2.html"><img > > > > > src="images/image2.jpg" alt="This alt should be displayed as a caption > > > > > in #captions." height="300px" width="940px" /></a></div> > > > > > <div class="featured-image"><a href="slide3.html"><img > > > > > src="images/image3.jpg" alt="This alt should be displayed as a caption > > > > > in #captions." height="300px" width="940px" /></a></div> > > > > > </div><!--end slides--> > > > > > > So I want the alts to become the captions and to change when the > > > > > slideshow auto-advances or when the user clicks on the appropriate > > > > > pager. > > > > > > Sorry, I'm a major noob :( > > > > > > Thanks in advance for any help! > >