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 <p> 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 <li> were being shown above one another until the script loaded fully. I
> got around this by adding overflow: hidden to the containing <ul> 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:
> > ...
> > <ul id="mycontainer">
> > <li>
> > foo.jpg
> > <p>I'm a caption.</p>
> > </li>
> > <li>
> > bar.jpg
> > <p>I'm another caption.</p>
> > </li>
> > </ul>
>
> > ...
>
> > 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-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-displ...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
