[jQuery] Re: Need solution to cycle through images and display a caption
Paul,
Thank you very much for this! I think it will come in extremely handy. I'm
not exactly sure what a "callback" actually means, but I'm sure I'll come
across it in my "Learning jQuery" book or I'll just look it up online. ;)
As for the text being on top of the image, that was my original intention
but for whatever reason couldn't get the CSS styled correctly and on top of
that the text was acting weird anyway, but I think now with the information
you've given me here, I can attempt to position the text on top of the image
again and see what happens. Hopefully all goes well.
Thanks showing me this!
Deron
Paul Mills-12 wrote:
>
>
> Hi,
> Just had a look at your site - very nice.
> I see the text is fading in and out in synch with the images. You can
> control the text independently using the callbacks.
> Try this:
> $('#slideshow').cycle({
> before: onBefore,
> after: onAfter
> });
>
> function onBefore() {
> $('p').hide();
> }
> function onAfter() {
> $('p').css({opacity: '0.5'}).slideDown('slow');
> }
>
> This hides the text before the image fades, and then slides the text
> in after the new image shows.
> You can also apply CSS to the element to position it on top of the
> image.
>
> Paul
>
> On Oct 8, 7:53 pm, deronsizemore <[EMAIL PROTECTED]> wrote:
>> That you very much Karl for chiming in here! I feel like an idiot now
>> though
>> as that was so simple. I can't believe I didn't even think of that. I
>> guess
>> I was thinking that the fade effect would only do images for some reason
>> so
>> adding a caption wrapped in a paragraph tag never entered my mind.
>>
>> I have it working now at:http://www.kentuckygolfing.com
>>
>> I do have a couple more questions though.
>>
>> 1. How do you go about changing the opacity of the caption background
>> color
>> as well as making that whole caption slide up from the bottom on the
>> example
>> site you supplied earlier? I tried to dissect your code but couldn't find
>> this anywhere. I tried to duplicate it myself but my limited knowledge
>> just
>> won't allow it yet.
>>
>> 2. It seems that on my site, when you refresh the page there is a slight
>> flicker where it shows the second image caption first but then quickly
>> switches back to the first caption, which is the right one. I noticed
>> that
>> yours doesn't do this. Any ideas? Initially on my site too, both images
>> in
>> the were being shown above one another until the script loaded
>> fully. I
>> got around this by adding overflow: hidden to the containing but
>> can't
>> figure out the caption flicker issue.
>>
>> 3. Last, if you watch on my site closely, when the caption appears, the
>> text
>> goes from normal (with no Anti-Alias) to smooth (with Anti-Alias). I
>> noticed
>> that your example does not. Is there something I'm doing wrong there too?
>>
>> Thanks for your help on this. I'm much farther along that I ever have
>> been
>> before. I'm really looking forward to your book Learning jQuery too.
>> Hopefully I wont' have to ask these beginner questions in future. ;)
>>
>> Deron
>>
>>
>>
>> Karl Swedberg-2 wrote:
>>
>> > The cycle plugin is excellent. It can have anything you want for each
>> > item -- image, caption, whatever. You apply the method to a container
>> > element, and the child elements are cycled. So, you could have this,
>> > for example:
>>
>> > jQuery:
>> > ...
>> > $('#mycontainer').cycle();
>> > ...
>>
>> > HTML:
>> > ...
>> >
>> >
>> > foo.jpg
>> > I'm a caption.
>> >
>> >
>> > bar.jpg
>> > I'm another caption.
>> >
>> >
>>
>> > ...
>>
>> > If you'd like to see an example of this in the wild, I used the cycle
>> > plugin here:
>>
>> >http://www.canons-regular.org/
>>
>> > --Karl
>>
>> >
>> > Karl Swedberg
>> >www.englishrules.com
>> >www.learningjquery.com
>>
>> > On Oct 8, 2008, at 11:03 AM, deronsizemore wrote:
>>
>> >> Thank you very much. I did see it the other day but I didn't notice
>> >> anything
>> >> where it allowed you to add in a caption. I'm going back to take a
>> >> second
>> >> look.
>>
>> >> I'm currently trying to read through the Learning jQuery book, so
>> >> hopefully
>> >> if Cycle doesn't have captions built in, I'll be able to add that
>> >> functionality myself soon.
>>
>> >> Paul Mills-12 wrote:
>>
>> >>> Hi,
>> >>> You could try the cycle plugin:
>> >>>http://plugins.jquery.com/project/cycle
>>
>> >>> The documentation is very good with lots of examples.
>> >>> You can use the before and after callback functions to show/hide the
>> >>> caption
>> >>> and CSS to position the caption on top of the image.
>>
>> >>> Paul
>>
>> >>> On Oct 6, 12:44 am, deronsizemore <[EMAIL PROTECTED]> wrote:
>> Hi,
>>
>> I'm looking for plugin that will allow cycling through images and
>> display
>> a
>> caption for each image. What I'm looking for is exactly like this
>> example:http://www.woothemes.com
[jQuery] Re: Need solution to cycle through images and display a caption
Hi,
Just had a look at your site - very nice.
I see the text is fading in and out in synch with the images. You can
control the text independently using the callbacks.
Try this:
$('#slideshow').cycle({
before: onBefore,
after: onAfter
});
function onBefore() {
$('p').hide();
}
function onAfter() {
$('p').css({opacity: '0.5'}).slideDown('slow');
}
This hides the text before the image fades, and then slides the text
in after the new image shows.
You can also apply CSS to the element to position it on top of the
image.
Paul
On Oct 8, 7:53 pm, deronsizemore <[EMAIL PROTECTED]> wrote:
> That you very much Karl for chiming in here! I feel like an idiot now though
> as that was so simple. I can't believe I didn't even think of that. I guess
> I was thinking that the fade effect would only do images for some reason so
> adding a caption wrapped in a paragraph tag never entered my mind.
>
> I have it working now at:http://www.kentuckygolfing.com
>
> I do have a couple more questions though.
>
> 1. How do you go about changing the opacity of the caption background color
> as well as making that whole caption slide up from the bottom on the example
> site you supplied earlier? I tried to dissect your code but couldn't find
> this anywhere. I tried to duplicate it myself but my limited knowledge just
> won't allow it yet.
>
> 2. It seems that on my site, when you refresh the page there is a slight
> flicker where it shows the second image caption first but then quickly
> switches back to the first caption, which is the right one. I noticed that
> yours doesn't do this. Any ideas? Initially on my site too, both images in
> the were being shown above one another until the script loaded fully. I
> got around this by adding overflow: hidden to the containing but can't
> figure out the caption flicker issue.
>
> 3. Last, if you watch on my site closely, when the caption appears, the text
> goes from normal (with no Anti-Alias) to smooth (with Anti-Alias). I noticed
> that your example does not. Is there something I'm doing wrong there too?
>
> Thanks for your help on this. I'm much farther along that I ever have been
> before. I'm really looking forward to your book Learning jQuery too.
> Hopefully I wont' have to ask these beginner questions in future. ;)
>
> Deron
>
>
>
> Karl Swedberg-2 wrote:
>
> > The cycle plugin is excellent. It can have anything you want for each
> > item -- image, caption, whatever. You apply the method to a container
> > element, and the child elements are cycled. So, you could have this,
> > for example:
>
> > jQuery:
> > ...
> > $('#mycontainer').cycle();
> > ...
>
> > HTML:
> > ...
> >
> >
> > foo.jpg
> > I'm a caption.
> >
> >
> > bar.jpg
> > I'm another caption.
> >
> >
>
> > ...
>
> > If you'd like to see an example of this in the wild, I used the cycle
> > plugin here:
>
> >http://www.canons-regular.org/
>
> > --Karl
>
> >
> > Karl Swedberg
> >www.englishrules.com
> >www.learningjquery.com
>
> > On Oct 8, 2008, at 11:03 AM, deronsizemore wrote:
>
> >> Thank you very much. I did see it the other day but I didn't notice
> >> anything
> >> where it allowed you to add in a caption. I'm going back to take a
> >> second
> >> look.
>
> >> I'm currently trying to read through the Learning jQuery book, so
> >> hopefully
> >> if Cycle doesn't have captions built in, I'll be able to add that
> >> functionality myself soon.
>
> >> Paul Mills-12 wrote:
>
> >>> Hi,
> >>> You could try the cycle plugin:
> >>>http://plugins.jquery.com/project/cycle
>
> >>> The documentation is very good with lots of examples.
> >>> You can use the before and after callback functions to show/hide the
> >>> caption
> >>> and CSS to position the caption on top of the image.
>
> >>> Paul
>
> >>> On Oct 6, 12:44 am, deronsizemore <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I'm looking for plugin that will allow cycling through images and
> display
> a
> caption for each image. What I'm looking for is exactly like this
> example:http://www.woothemes.com/demo/?t=3
>
> The image on the top left cycles through different images and
> displays a
> unique caption for each image. Is there anything out there like
> this for
> jQuery? I believe the example above used this mootools plugin I
> believe:http://smoothgallery.jondesign.net/getting-started/gallery-set-howto/
>
> Currently, I'm using jQuery Innerfade tocyclethrough images, but I'm
> having to manually insert captions via Photoshop and it's just
> getting to
> be
> a bit tedious.
>
> Thanks
> --
> View this message in
> context:http://www.nabble.com/Need-solution-to-cycle-through-images-and-displ
> ...
> Sent from the jQuery General Discussion mailing list archive at
> Nabble.com.
>
> >> --
> >> View this message in context:
> >>http://
[jQuery] Re: Need solution to cycle through images and display a caption
That you very much Karl for chiming in here! I feel like an idiot now though
as that was so simple. I can't believe I didn't even think of that. I guess
I was thinking that the fade effect would only do images for some reason so
adding a caption wrapped in a paragraph tag never entered my mind.
I have it working now at: http://www.kentuckygolfing.com
I do have a couple more questions though.
1. How do you go about changing the opacity of the caption background color
as well as making that whole caption slide up from the bottom on the example
site you supplied earlier? I tried to dissect your code but couldn't find
this anywhere. I tried to duplicate it myself but my limited knowledge just
won't allow it yet.
2. It seems that on my site, when you refresh the page there is a slight
flicker where it shows the second image caption first but then quickly
switches back to the first caption, which is the right one. I noticed that
yours doesn't do this. Any ideas? Initially on my site too, both images in
the were being shown above one another until the script loaded fully. I
got around this by adding overflow: hidden to the containing but can't
figure out the caption flicker issue.
3. Last, if you watch on my site closely, when the caption appears, the text
goes from normal (with no Anti-Alias) to smooth (with Anti-Alias). I noticed
that your example does not. Is there something I'm doing wrong there too?
Thanks for your help on this. I'm much farther along that I ever have been
before. I'm really looking forward to your book Learning jQuery too.
Hopefully I wont' have to ask these beginner questions in future. ;)
Deron
Karl Swedberg-2 wrote:
>
> The cycle plugin is excellent. It can have anything you want for each
> item -- image, caption, whatever. You apply the method to a container
> element, and the child elements are cycled. So, you could have this,
> for example:
>
> jQuery:
> ...
> $('#mycontainer').cycle();
> ...
>
> HTML:
> ...
>
>
>foo.jpg
> I'm a caption.
>
>
>bar.jpg
> I'm another caption.
>
>
>
> ...
>
>
> If you'd like to see an example of this in the wild, I used the cycle
> plugin here:
>
> http://www.canons-regular.org/
>
>
> --Karl
>
>
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
>
> On Oct 8, 2008, at 11:03 AM, deronsizemore wrote:
>
>>
>>
>> Thank you very much. I did see it the other day but I didn't notice
>> anything
>> where it allowed you to add in a caption. I'm going back to take a
>> second
>> look.
>>
>> I'm currently trying to read through the Learning jQuery book, so
>> hopefully
>> if Cycle doesn't have captions built in, I'll be able to add that
>> functionality myself soon.
>>
>>
>>
>> Paul Mills-12 wrote:
>>>
>>>
>>> Hi,
>>> You could try the cycle plugin:
>>> http://plugins.jquery.com/project/cycle
>>>
>>> The documentation is very good with lots of examples.
>>> You can use the before and after callback functions to show/hide the
>>> caption
>>> and CSS to position the caption on top of the image.
>>>
>>> Paul
>>>
>>> On Oct 6, 12:44 am, deronsizemore <[EMAIL PROTECTED]> wrote:
Hi,
I'm looking for plugin that will allow cycling through images and
display
a
caption for each image. What I'm looking for is exactly like this
example:http://www.woothemes.com/demo/?t=3
The image on the top left cycles through different images and
displays a
unique caption for each image. Is there anything out there like
this for
jQuery? I believe the example above used this mootools plugin I
believe:http://smoothgallery.jondesign.net/getting-started/gallery-set-howto/
Currently, I'm using jQuery Innerfade tocyclethrough images, but I'm
having to manually insert captions via Photoshop and it's just
getting to
be
a bit tedious.
Thanks
--
View this message in
context:http://www.nabble.com/Need-solution-to-cycle-through-images-and-displ
...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
>>>
>>>
>>
>> --
>> View this message in context:
>> http://www.nabble.com/Need-solution-to-cycle-through-images-and-display-a-caption-tp19830233s27240p19880671.html
>> Sent from the jQuery General Discussion mailing list archive at
>> Nabble.com.
>>
>
>
>
--
View this message in context:
http://www.nabble.com/Need-solution-to-cycle-through-images-and-display-a-caption-tp19830233s27240p19885126.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Need solution to cycle through images and display a caption
The cycle plugin is excellent. It can have anything you want for each
item -- image, caption, whatever. You apply the method to a container
element, and the child elements are cycled. So, you could have this,
for example:
jQuery:
...
$('#mycontainer').cycle();
...
HTML:
...
I'm a caption.
I'm another caption.
...
If you'd like to see an example of this in the wild, I used the cycle
plugin here:
http://www.canons-regular.org/
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 8, 2008, at 11:03 AM, deronsizemore wrote:
Thank you very much. I did see it the other day but I didn't notice
anything
where it allowed you to add in a caption. I'm going back to take a
second
look.
I'm currently trying to read through the Learning jQuery book, so
hopefully
if Cycle doesn't have captions built in, I'll be able to add that
functionality myself soon.
Paul Mills-12 wrote:
Hi,
You could try the cycle plugin:
http://plugins.jquery.com/project/cycle
The documentation is very good with lots of examples.
You can use the before and after callback functions to show/hide the
caption
and CSS to position the caption on top of the image.
Paul
On Oct 6, 12:44 am, deronsizemore <[EMAIL PROTECTED]> wrote:
Hi,
I'm looking for plugin that will allow cycling through images and
display
a
caption for each image. What I'm looking for is exactly like this
example:http://www.woothemes.com/demo/?t=3
The image on the top left cycles through different images and
displays a
unique caption for each image. Is there anything out there like
this for
jQuery? I believe the example above used this mootools plugin I
believe:http://smoothgallery.jondesign.net/getting-started/gallery-set-howto/
Currently, I'm using jQuery Innerfade tocyclethrough images, but I'm
having to manually insert captions via Photoshop and it's just
getting to
be
a bit tedious.
Thanks
--
View this message in
context:http://www.nabble.com/Need-solution-to-cycle-through-images-and-displ
...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://www.nabble.com/Need-solution-to-cycle-through-images-and-display-a-caption-tp19830233s27240p19880671.html
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
[jQuery] Re: Need solution to cycle through images and display a caption
Thank you very much. I did see it the other day but I didn't notice anything where it allowed you to add in a caption. I'm going back to take a second look. I'm currently trying to read through the Learning jQuery book, so hopefully if Cycle doesn't have captions built in, I'll be able to add that functionality myself soon. Paul Mills-12 wrote: > > > Hi, > You could try the cycle plugin: > http://plugins.jquery.com/project/cycle > > The documentation is very good with lots of examples. > You can use the before and after callback functions to show/hide the > caption > and CSS to position the caption on top of the image. > > Paul > > On Oct 6, 12:44 am, deronsizemore <[EMAIL PROTECTED]> wrote: >> Hi, >> >> I'm looking for plugin that will allow cycling through images and display >> a >> caption for each image. What I'm looking for is exactly like this >> example:http://www.woothemes.com/demo/?t=3 >> >> The image on the top left cycles through different images and displays a >> unique caption for each image. Is there anything out there like this for >> jQuery? I believe the example above used this mootools plugin I >> believe:http://smoothgallery.jondesign.net/getting-started/gallery-set-howto/ >> >> Currently, I'm using jQuery Innerfade tocyclethrough images, but I'm >> having to manually insert captions via Photoshop and it's just getting to >> be >> a bit tedious. >> >> Thanks >> -- >> View this message in >> context:http://www.nabble.com/Need-solution-to-cycle-through-images-and-displ... >> Sent from the jQuery General Discussion mailing list archive at >> Nabble.com. > > -- View this message in context: http://www.nabble.com/Need-solution-to-cycle-through-images-and-display-a-caption-tp19830233s27240p19880671.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Need solution to cycle through images and display a caption
Hi, You could try the cycle plugin: http://plugins.jquery.com/project/cycle The documentation is very good with lots of examples. You can use the before and after callback functions to show/hide the caption and CSS to position the caption on top of the image. Paul On Oct 6, 12:44 am, deronsizemore <[EMAIL PROTECTED]> wrote: > Hi, > > I'm looking for plugin that will allow cycling through images and display a > caption for each image. What I'm looking for is exactly like this > example:http://www.woothemes.com/demo/?t=3 > > The image on the top left cycles through different images and displays a > unique caption for each image. Is there anything out there like this for > jQuery? I believe the example above used this mootools plugin I > believe:http://smoothgallery.jondesign.net/getting-started/gallery-set-howto/ > > Currently, I'm using jQuery Innerfade tocyclethrough images, but I'm > having to manually insert captions via Photoshop and it's just getting to be > a bit tedious. > > Thanks > -- > View this message in > context:http://www.nabble.com/Need-solution-to-cycle-through-images-and-displ... > Sent from the jQuery General Discussion mailing list archive at Nabble.com.
