assign next/prev to my own buttons

[fourgood]

is it possible to assign the next/prev to my own button. for example if i want the navigation to appear somewhere else on the page and not beneath the slides but under?

[Mottie]

You can use the methods described in the wiki documentation to change panels from outside of MovingBoxes. Here is a demo, and the code below. Note that I used buttons in the demo but used links here for more variety.

HTML

<a href="#" class="prev">Previous</a>
<a href="#" class="next">Next</a>

Code

$('.prev, .next').click(function(){
    var slider = $('#slider').data('movingBoxes'),
        target = slider.curPanel += ($(this).hasClass('next')) ? 1 : -1;
    // change to panel #
    slider.change(target);
    return false; // don't follow the link
});

[fourgood]

ahh, i knew i saw that example but just couldnt find it anymore.
any hint how i can put the left/right arrows beneath the nav which is generated dynamically?

edit: i tried with

<script> $('.mb-controls').prepend('PREV').append('NEXT'); </script>

but it shows only a second then disappears

[Mottie]

Oh, I just made that demo... I don't think I made it before, unless you're referring to one of my AnythingSlider demos. o.O

I didn't test it, but I bet the arrows you added are disappearing because of all of the overflow: hidden settings and the alignment in the css,

Are you trying to add the navigation arrows in the same line as the navigation? Or, maybe try adding the arrows after the slider?

$('#slider').after('<a class="prev_btn">PREV</a> <a class="next_btn">NEXT</a>');

[fourgood]

i meant that demo you were refering to ;)
i just want two little arrows on the left and right of the nav, like this ◁ ● ● ● ● ● ▷

[Mottie]

Ahhh ok. Because the plugin looks for <a> within the navigation controls to determine which panel to choose, I had to use spans. Here is a updated demo

CSS

/* hide big arrows */
a.mb-scrollButtons { display: none; }
.mb-controls span {
    padding: 2px;
    margin-right:5px;
    cursor: pointer;
}
.mb-controls span:hover {
    color: #fff;
}

Script

$('#slider').movingBoxes({
    buildNav: true,

    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar) {
        slider.$nav
            // we can't use <a> for the arrows since the plugin looks for
            // links within the navigation controls
            .prepend('<span class="prev">◁</span>')
            .append('<span class="next">▷</span>')
            .find('.prev, .next').click(function() {
                slider[ ($(this).hasClass('next')) ? 'goForward' : 'goBack']();
            });
    }
});​

[fourgood]

the <a> was the problem..thank you!

[fourgood]

can i append the buttons before initializing? i takes about 2-3 seconds until the arrows appear.

[Mottie]

You can't really do that because the navigation links haven't been built yet. And if you did add them before initialization, they would get over-written by the navigation formatter. It's slow because the initialization callback isn't executed until all of the images have loaded.

[Mottie]

Hmm, I guess I could add another callback and call it something like "preinitialization"... and have it occur after the basic structure is established.

[fourgood]

tell me if you do. this script is getting better and better!

[Mottie]

Ok done... I added a "preinit" callback. I'll update the docs in a bit (after lunch).

New demo that now allows using <a> links instead of spans :)

Also, I updated the navFormatter so you can add attributes to the nav links, like titles for tooltips or other data.

[fourgood]

preInit is working well, no delay!

That new navFormatter seems to be a great feature but i can`t get it to work.
even that simple code :

navFormatter : function(index, panel){ return "●"; } 

doesnt work anymore. there are just numbers.

ive had some HTML in there which is not working anymore, too.

navFormatter : function(index, panel){ 

_title=panel.find('span').text();  _url=panel.find('a img').attr('src');

return "<div class='formInfo' id='"+_title+"' title='"+_title+"'>
        <div class='nav_btn'></div>
            <span style='display: none'>
                <img width='60' height='60' class='imag' src='"+_url+"' /><br />"+_title+"
            </span>
        </div>";  },

[Mottie]

DERP!

I copied the navFormatter code from AnythingSlider and in that plugin, the option is named navigationFormatter... so I fixed the spelling. That'll teach me not to test my fixes :/ But it should be working now in the latest update! Sorry!

[Mottie]

LOL I did it again.. the navFormatter was sending a zero-based index... I just fixed that. So now I think I've fixed all of the problems I introduced from yesterday's work. At least for this plugin o.O LOL.