-
Notifications
You must be signed in to change notification settings - Fork 147
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
assign next/prev to my own buttons #68
Comments
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
}); |
ahh, i knew i saw that example but just couldnt find it anymore. edit: i tried with <script> $('.mb-controls').prepend('PREV').append('NEXT'); </script>but it shows only a second then disappears |
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 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>'); |
i meant that demo you were refering to ;) |
Ahhh ok. Because the plugin looks for 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']();
});
}
}); |
the |
can i append the buttons before initializing? i takes about 2-3 seconds until the arrows appear. |
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. |
Hmm, I guess I could add another callback and call it something like "preinitialization"... and have it occur after the basic structure is established. |
tell me if you do. this script is getting better and better! |
Ok done... I added a "preinit" callback. I'll update the docs in a bit (after lunch). New demo that now allows using Also, I updated the |
preInit is working well, no delay! That new navFormatter seems to be a great feature but i can`t get it to work. 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>"; }, |
DERP! I copied the |
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. |
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?
The text was updated successfully, but these errors were encountered: