Grow your CSS skills. Land your dream job.

anythingslider caption

  • # May 31, 2011 at 6:35 pm

    What is the easiest way to place a caption box outside of the photo slider? I’ve got the caption displaying bottom left. However, I’d rather have it outside the box.

    I’ve tried changing the css, but placing it farther left seems to hide the caption.

     #slider3 .caption-left {
    left: 0px;
    bottom: 0;
    width: 192px;
    height: 500px;
    }

    Any help would be appreciated!

    # June 1, 2011 at 12:52 am

    Hi gmox!

    Because the wrapper around the slider has overflow set as hidden, it might be best to just add a div outside the slider and update its contents. Something like this (demo):

    HTML




    • Caption 1.




    • Caption 2.




    • Caption 3.




    • Caption 4.




    Script

    var updateCaption = function(slider){
    var cap = slider.$currentPage.find('.caption').html();
    $('#current-caption')
    .html(cap)
    .fadeIn(200);
    };

    $('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) { updateCaption(slider); },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
    $('#current-caption').fadeOut(200);
    },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider) { updateCaption(slider); }

    });
    # June 1, 2011 at 2:13 pm

    edit. Thanks! figured out how to place the script… Next is to get the div “current- caption” where it is supposed to go no that it is outside the slider, then into my site, where it is supposed to to…

    thanks again, huge help!

    # July 8, 2012 at 9:39 pm

    Mottie,

    Could you show or explain how to call TWO different captions from the slider change? I have captions in two separate DIVs that I want to slide in/out with the change of each image. I tried doubling the “recipe” but to no avail.

    Thanks.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".