Forums

fightstarr20

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?

Mottie

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.

fightstarr20

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

fightstarr20

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?

Mottie

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

<div id="nav"></div>
<ul id="slider">...</ul>

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('<ul><li><a class="show">Show / Hide Caption</a></li></ul>')
            .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.

fightstarr20

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?

fightstarr20

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

Mottie

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.

fightstarr20

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?

Mottie

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.

fightstarr20

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

Mottie

Try adding this to the css

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

Here is an updated demo.

fightstarr20

Perfect, thanks for all your help :)

tbland

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?

treehouse : what would you like to learn today?

Forums

[Solved] AnythingSlider - Moving caption location