[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!
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!
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!
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!
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!
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!
