Jquery Tools Scrollable onBeforeSeek function and then slide to next

Question

I'm trying to implement and customize a little the behavior of the jquery tools scrollable plugin. What I want is calling a function just before sliding to the next item, waiting for the function to complete and just then slide to the next item.

I tried out the onBeforeSeek function from the api, but it unfortunately calls my desired function (like f.ex. setTimeout) and doesn't wait for it to finish, it immediately slides to the next item.

Has someone any idea how I can prevent from sliding to the next item until a function is completed? It doesn't have to occur absolutely trough the onBeforeSeek, but it seemed to me ok, because it summarizes the result of several events that trigger prev/next.

Markup:

<section>
    <div>
        <dl>
            <dt>titre 1</dt>
            <dd><img src="http://placehold.it/350x150"></dd>
        </dl>
        <dl>
            <dt>titre 2</dt>
            <dd><img src="http://placehold.it/350x150"></dd>
        </dl>
        <dl>
            <dt>titre 3</dt>
            <dd><img src="http://placehold.it/350x150"></dd>
        </dl>
    </div>
</section>

<!-- navigation (cubes)  -->
<div class="navi"></div>
<br style="clear: both;">

<!-- navigation prev/next -->
<a class="prev browse left">prev</a> | <a class="next browse right">next</a>

JS:

$('section').css('overflow', 'hidden');

$('section').scrollable({ circular: true }).navigator();

var api = $('section').data("scrollable");//get access to the api functions

api.onBeforeSeek(function(){

    //do something and after this start sliding to the next img

}

http://jsfiddle.net/micka/zhDGC/

Strangely enough in the fiddle connecting to the api makes the slider break...

Any suggestions can help. Thanks! Michaël

score 0 · Answer 1 · edited May 23 '17 at 12:27

EDIT

So, basically what you want to achieve is to pause the onBeforeSeek event, do your stuff and then fire it again. For this purpose you can use some jquery plugins (simply google for "jquery event pause resume"), one of them can be found here.

If you don't want to use any plugins or don't want to deal with the events, you can use my solution in this fiddle. Instead of freezing and then re-launching the event it simply cancels it for the first time, does the animation, changes the andimation status as done and then fires it again, but this time without the event cancellation.

var event_pos_list = [false, false, false];

api.onBeforeSeek(function(event, pos){
    // if the animation is not done - do it and skip the scroll
    if(!event_pos_list[pos]){
        event.preventDefault();
        $('span').animate({marginLeft: (pos*50) + 'px'}, 2000, function(){
            // do the scroll, this time the animation is completed
            event_pos_list[pos] = true;
            api.seekTo(pos);
        });
    }
});
api.onSeek(function(event, pos){
    // after the scroll is done, reset the event_pos_list
    event_pos_list[pos] = false;
});

Hope this helps.

that's the same as connecting to the api with `api.onBeforeSeek(function(){...})` This doesn't help me I'm sorry. As described, I want to call a function when I click on the next button, and when this function completes, slide to the next item. — MichaelKaeser, Mar 08 '13 at 18:45
please, check the updated fiddle out. You missed the trailing bracket. http://jsfiddle.net/zhDGC/17/ — iurii, Mar 09 '13 at 10:28
This works only for an alert function. All actions are blocked when the alert happens. But check out the same with for example an animation: http://jsfiddle.net/zhDGC/18/ , it doesn't wait for the animation complete to switch to the next item... — MichaelKaeser, Mar 10 '13 at 10:58

Jquery Tools Scrollable onBeforeSeek function and then slide to next

1 Answers1

EDIT