Support » Plugin: Meteor Slides » [Plugin: Meteor Slides] Add featured image caption to each slide

  • Resolved Opally


    For people who want to show the caption instead of the title, you can use this function in your theme:

    function the_post_thumbnail_caption() {
         global $post;
         $thumbnail_id    = get_post_thumbnail_id($post->ID);
         $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
         if ($thumbnail_image && isset($thumbnail_image[0])) {
             echo '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';

    Usage –


    and add line height to the suggested custom template CSS:

    .meteor-slides p {
        line-height: 1.2;

    because the default line-height: 0 causes long captions to wrap over themselves.

    The function is from this discussion:

    I also got rid of the span tag echo.

    Now, if I can do the jquery to make the caption slide up and down, as it does on the old s3slider.js, I’d be thrilled! Any suggestions out there?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Josh Leuze


    Hey Opally, thanks for sharing! And thanks for pointing out that issue with the line-height, I have been meaning to add that to that to the caption example in the documentation.

    I haven’t done an animated caption exactly like that, but I have done one that slides in from the side, here’s something for the stylesheet that should get you pretty close:

    .meteor-slides p {
        background: rgba(0,0,0,0.2);
        bottom: -40px;
        color: #000;
        height: 40px
        left: 0;
        line-height: 20px;
        margin: 0;
        padding: 2%;
        position: absolute;
        text-align: center;
        width: 96%;

    And this in a custom slideshow script:

    before: function () {
    	$j('.meteor-slides p').css('bottom', -60);
    	$j('.meteor-slides p').animate({bottom:0}, 1500);

    That would go at the end of the cycle options, just like the pagerAnchorBuilder option in the example.

    Thank you for the awesome fast reply!

    You’ve give me a great start! It works as you say.

    The issue I now see is that the caption starts sliding up as the next slide is sliding in. Ideally there would be a delay on the slideup, or rather, animate. You’d see the image for a second or two, and then the caption would slide up.
    Do you happen to remember how to do a timed delay in jquery?

    Plugin Author Josh Leuze


    I’m not sure off the top of my head. When I used this on a project I had a bit of a delay on the captions, but what I did was put them -600px off the slideshow, so they start animating right when the slide transitions. but it doesn’t come on screen for a bit.

    hey, if you’ve set 10 seconds per slide in settings, this works pretty nice:

    before: function () {
                $j('.meteor-slides p').css('bottom', -60).delay(3000);
                $j('.meteor-slides p').animate({bottom:0}, 1500).delay(5000);
                $j('.meteor-slides p').animate({bottom:-60}, 1500);

    Longer slide transitions will need this to be tweaked.

    thank you for your help!!

    Plugin Author Josh Leuze


    No problem, I’ll have to try using animated captions more often!

    … and instead of adding more animation options to the slide interface, this would work for typical settings;

    add these settings to the slideshow options in slideshow.js:

    var $captiondelay    = $slidespeed + 1000;
    var $captionduration = $slidetimeout - ($slidespeed*2);

    and change the animation function to use those variables for delays:

    before: function () {
           $j('.meteor-slides p').css('bottom', -60).delay($captiondelay);
           $j('.meteor-slides p').animate({bottom:0}, 1500).delay($captionduration);
           $j('.meteor-slides p').animate({bottom:-60}, 1500);

    this way, you don’t have the fragility of hard-coding delays that might not work with someone’s option settings. Well, it’s still fragile, but only at the extremes.

    Plugin Author Josh Leuze


    Cool, I’ll give that a try.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: Meteor Slides] Add featured image caption to each slide’ is closed to new replies.