[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!

2009-11-22 Thread Mike Alsup
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=buttonsPager anchors are here./div
 div id=captionsspanAlt attribute would go here./span/div

 The slideshow div looks like this

 div id=slides
             div class=featured-imagea href=slide1.htmlimg
 src=images/image1.jpg alt=This alt should be displayed as a caption
 in #captions. height=300px width=940px //a/div
             div class=featured-imagea href=slide2.htmlimg
 src=images/image2.jpg alt=This alt should be displayed as a caption
 in #captions. height=300px width=940px //a/div
             div class=featured-imagea href=slide3.htmlimg
 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!




[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!

2009-11-21 Thread Mike Alsup
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=buttonsPager anchors are here./div
 div id=captionsspanAlt attribute would go here./span/div

 The slideshow div looks like this

 div id=slides
             div class=featured-imagea href=slide1.htmlimg
 src=images/image1.jpg alt=This alt should be displayed as a caption
 in #captions. height=300px width=940px //a/div
             div class=featured-imagea href=slide2.htmlimg
 src=images/image2.jpg alt=This alt should be displayed as a caption
 in #captions. height=300px width=940px //a/div
             div class=featured-imagea href=slide3.htmlimg
 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!


[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!

2009-11-21 Thread Wroathe
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=buttonsPager anchors are here./div
  div id=captionsspanAlt attribute would go here./span/div

  The slideshow div looks like this

  div id=slides
              div class=featured-imagea href=slide1.htmlimg
  src=images/image1.jpg alt=This alt should be displayed as a caption
  in #captions. height=300px width=940px //a/div
              div class=featured-imagea href=slide2.htmlimg
  src=images/image2.jpg alt=This alt should be displayed as a caption
  in #captions. height=300px width=940px //a/div
              div class=featured-imagea href=slide3.htmlimg
  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!


[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!

2009-11-21 Thread Wroathe
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=buttonsPager anchors are here./div
   div id=captionsspanAlt attribute would go here./span/div

   The slideshow div looks like this

   div id=slides
               div class=featured-imagea href=slide1.htmlimg
   src=images/image1.jpg alt=This alt should be displayed as a caption
   in #captions. height=300px width=940px //a/div
               div class=featured-imagea href=slide2.htmlimg
   src=images/image2.jpg alt=This alt should be displayed as a caption
   in #captions. height=300px width=940px //a/div
               div class=featured-imagea href=slide3.htmlimg
   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!


[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!

2009-11-21 Thread Wroathe
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=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div

The slideshow div looks like this

div id=slides
            div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
            div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
            div class=featured-imagea href=slide3.htmlimg
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!