Grow your CSS skills. Land your dream job.

AnythingSlider – Moving caption location

  • # January 13, 2012 at 11:50 am

    I am currently battling with the anythingslider, I have almost managed to make it do what I want!

    Heres where I am at so far – http://jsfiddle.net/Cm479/3281/

    • For some reason the first caption is not displayed, if you go forward a slide and then back then the caption is displayed correctly.
    • I want the caption to display at the bottom on the slide itself, overlaying the image. Currently it is sitting below the slider and I cant work out how to get it to move up.
    • I have managed to add a button called ‘Show / Hide Caption’ and it works correctly, clicking it toggles the caption. I am trying to get the tab itself to float to the right but have not been able to manage it.

    Can anybody can help with any of the above questions?

    # January 13, 2012 at 4:56 pm

    Hi fightstarr20!

    Try this (updated demo). Basically the “onInitialized” function shouldn’t be split into two functions because the last one over-rides all previous ones. And since the captions are contained within the slide, I switched the code to reveal them instead of the caption under the slider.

    # January 15, 2012 at 11:38 am

    Thanks for that, everything is working how I wanted it to now :)

    # February 3, 2012 at 7:23 am

    Ok i’ve moved on slightly! I would like to move the page number tabs to the top right of the ul instead of them being at the bottom right. I would then like to move the caption to its own box underneath the ul. I am trying to move the tabs first but can’t seem to find any documentation on it, can you point me in the right direction?

    # February 3, 2012 at 9:01 am

    You will need to include the “appendControlsTo” option and target an element above the slider. Since the controls are now outside of the slider, you’ll also need to apply custom css to it (demo):
    HTML


      ...

    Code

    var updateCaption = function(slider){
    var cap = slider.$currentPage
    .find('.caption').fadeIn(200).end()
    .siblings().find('.caption').fadeOut(200);
    };

    $('#slider').anythingSlider({
    stopAtEnd: true,
    autoPlay : false,
    infiniteSlides: false,
    appendControlsTo: $('#nav'),

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

    slider.$controls
    .append('')
    .find('.show').click(function(){
    slider.$currentPage.find('.caption').fadeToggle(200);
    });
    },

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

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

    And the extra css (customize it as desired)

    /* navigation css */
    #nav { margin: 5px auto; width: 500px; height: 40px; }
    #nav li { padding: 4px; float: left; }

    #nav a {
    display: block;
    width: auto;
    height: 20px;
    background: #999;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    }
    #nav a:hover { background: #000; }
    #nav a.cur { background: #0080ff; }
    #nav a.start-stop { background: #080; }
    #nav a.start-stop.playing { background: #800; }

    There is a demo on the first page of the documentation – you can explore the other demos there to get an idea of what else is possible.

    # February 3, 2012 at 10:23 am

    Thanks, that makes it clearer. On a sidenote, I keep seeing issues like this whilst I am developing http://jsfiddle.net/LkTUw/

    The page keeps getting longer, can you point out what I am doing wrong?

    # February 3, 2012 at 11:02 am

    Ok I have updated the fiddle with where I am at currently. http://jsfiddle.net/srFPm/

    The external nav works great so thanks for the guidance on that, my external caption box sort of works but I still have the page getting longer issue

    # February 3, 2012 at 6:03 pm

    When AnythingSlider has the “expand” option set to true, the outer wrapper needs to have a set height. Setting it to 100% of the body is why it keeps increasing.

    If you look at this demo (from the main document page) you’ll see how to handle the wrapper css

    #wrapper {
    width: 100%;
    display: block;
    position: fixed;
    height: auto;
    top: 10px;
    left: 0;
    bottom: 10px;
    right: 0;
    }

    or use “position: absolute” for mobile devices since position:fixed doesn’t work correctly.

    # February 6, 2012 at 10:10 am

    Ok im further along, I have ended up modifying the demo above to get rid of the bloat I had aquired on my version!

    http://jsfiddle.net/5fNuN/

    I know have the caption displaying on every slide, but what I want is the caption to sit underneath, but inside the actual UL itself, not overlayed though. Also for some reason the images are not filling the li. Where am I going wrong?

    # February 6, 2012 at 1:02 pm

    If you want the captions inside of the panel, then you should follow the method used in Demo #3… all of the code is in the accordion under the demo.

    # February 7, 2012 at 5:23 am

    So close! Here is where I am at the moment http://jsfiddle.net/5fNuN/1/

    Everything works but on the first slide with the caption the expand contents is being messed up by the caption for some reason. I have set display:none for the .caption but it is still affecting the contents of the li

    # February 7, 2012 at 9:12 am

    Try adding this to the css

    #slider img { width: 100%; height: 100%; }

    Here is an updated demo.

    # February 10, 2012 at 4:04 am

    Perfect, thanks for all your help :)

    # October 8, 2012 at 4:31 pm

    Hi. I’m not a JS developer and I’m having the same issue with the first caption. Is there a simple, step-by-step solution for this?

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

You must be logged in to reply to this topic.

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