Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript AnythingSlider – Moving caption location

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #36093
    fightstarr20
    Member

    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?

    #94564
    Mottie
    Member

    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.

    #94619
    fightstarr20
    Member

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

    #96089
    fightstarr20
    Member

    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?

    #96096
    Mottie
    Member

    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.

    #96100
    fightstarr20
    Member

    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?

    #96106
    fightstarr20
    Member

    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

    #96132
    Mottie
    Member

    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.

    #96260
    fightstarr20
    Member

    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?

    #96272
    Mottie
    Member

    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.

    #96307
    fightstarr20
    Member

    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

    #96320
    Mottie
    Member

    Try adding this to the css

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

    Here is an updated demo.

    #96508
    fightstarr20
    Member

    Perfect, thanks for all your help :)

    #111447
    tbland
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.