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!
