Mousewheel Support

[fourgood]

Is it possible to integrate mousewheel support?
I already tried this plugin https://github.com/brandonaaron/jquery-mousewheel/
but can`t get it to work.

I just need to know the syntax for triggering the the 'goForward' / 'goBack' event from outside.

[fourgood]

got it to work:

    $(document).ready(function() {
    mb = $('#slider').data('movingBoxes');

    $('.mb-inside')
        .mousewheel(function(event, delta, deltaX, deltaY) {

            if (delta > 0)
                mb.goBack();
            else if (delta < 0)
                mb.goForward();

            return false; // prevent default
        });
    });

only issue that i can scroll only one after another. means that the slide have to be completed after another can occure, which makes it pretty slow to scroll thorugh many images.

[Mottie]

Hi fourgood!

I actually ended up modifying the plugin core a bit to prevent rapid calls to those functions, it totally messes up the appearance otherwise. But I did modify your code a bit to change the animation speed depending on the amount of wheel scroll... it's not perfect and yes, you can still only scroll one panel at a time, but it's much faster. Demo

$('#slider').movingBoxes({
    buildNav: true,
    // if true, navigation links will be added
    preinit: function(e, mb, tar) {
        var defaultTime = 500;
        mb.$window.mousewheel(function(event, delta) {

            // Modify animation time based on delta
            // delta values are varied across browsers/OS,
            // so we need to normalize it somehow
            var newTime, direction = (delta < 0) ? -1 : 1,
                ab = Math.abs(delta),
                newDelta = ab * 10;
            if (ab > 1000) { // probably never be this high; but just in case
                newDelta = 100;
            }
            if (ab > 100 && ab < 1000) {
                newDelta = ab / 10;
            }
            if (ab < 100) {
                newDelta = ab * 10;
            }

            // end up with a time between 50 and defaultTime
            newTime = Math.floor(Math.abs(defaultTime * 10 / newDelta));
            newTime = (newTime > defaultTime) ? defaultTime : (newTime < 50) ? 50 : newTime;

            // change animation speed
            mb.options.speed = newTime;
            // using change because it includes a callback
            mb.change(mb.curPanel - direction, function() {
                // change speed back after completed
                mb.options.speed = defaultTime;
            });
            return false; // prevent default
        });
    }
});​

[fourgood]

that works great so far. but how do i combine that with my function for creating the NAV arrows which is also in the preinit.

function(e, slider, tar){

            slider.$nav.prepend('<span class="prev"></span>').append('<span class="next"></span>').find('.prev, .next').click(function() {
                slider[ ($(this).hasClass('next')) ? 'goForward' : 'goBack']();

[Mottie]

Think of the callback function as a block of code, add it before or after:

preinit : function(e, mb, tar){
    // nav arrow code

   //  mousewheel code
}

or the full version ;)

preinit: function(e, mb, tar) {

    // nav arrow code
    // from https://github.com/chriscoyier/MovingBoxes/issues/68#issuecomment-4195656
    mb.$nav
        .prepend('<span class="prev"></span>')
        .append('<span class="next"></span>')
        .find('.prev, .next').click(function() {
            mb[ ($(this).hasClass('next')) ? 'goForward' : 'goBack']();
        });

    //  mousewheel code
    var defaultTime = 500;
    mb.$window.mousewheel(function(event, delta) {

        // Modify animation time based on delta
        // delta values are varied across browsers/OS,
        // so we need to normalize it somehow
        var newTime, direction = (delta < 0) ? -1 : 1,
        ab = Math.abs(delta),
        newDelta = ab * 10;
        if (ab > 1000) { // probably never be this high; but just in case
            newDelta = 100;
        }
        if (ab > 100 && ab < 1000) {
            newDelta = ab / 10;
        }
        if (ab < 100) {
            newDelta = ab * 10;
        }

        // end up with a time between 50 and defaultTime
        newTime = Math.floor(Math.abs(defaultTime * 10 / newDelta));
        newTime = (newTime > defaultTime) ? defaultTime : (newTime < 50) ? 50 : newTime;

        // change animation speed
        mb.options.speed = newTime;
        // using change because it includes a callback
        mb.change(mb.curPanel - direction, function() {
            // change speed back after completed
            mb.options.speed = defaultTime;
        });
        return false; // prevent default
    });
}

[fourgood]

i tried that, but the

defines mb and not slider, so it doesnt work

[Mottie]

Opps, just change slider to mb... I updated the code above.

[fourgood]

i tried that too, but now the speed is slow again ;( so i thought i was wrong
http://kieferundkiefer.de/?p=163

[Mottie]

Seems to work fine for me, just right in Chrome and almost too fast in Firefox. Is there a specific browser that you are seeing it slow in?... Like I said, it's not prefect, every browser returns a different delta so there is no ideal solution.

[fourgood]

im using firefox 10.0.2 on a Win7 and a WinXP machine.
Without the arrows it was much faster.

it seems that in the very first moment when the page loads, the first movement is fast.
then it stucks between every slide.

[Mottie]

It's going to pause between slides no matter what, because the animation stops when it centers the panel.

If we got rid of the stop, it could stack up too many animations it could mess up the look of the boxes, that is if they are resizing. I guess I could try tossing in a stop() animation in there and see what happens...

[Mottie]

Hmm, ok that seemed to work much better, it might even be too fast... so I just pushed a new version where I added a new option named stopAnimation... here is the new much shorter code and demol:

$('#slider').movingBoxes({
    buildNav: true,
    stopAnimation: true,
    preinit: function(e, mb, tar) {
        mb.$window.mousewheel(function(event, delta) {
            mb.change(mb.curPanel + (delta < 0 ? 1 : -1));
            return false; // prevent default
        });
    }
});​

Make sure you use shift + browser reload to clear the browser cache.

[fourgood]

wow! you did it.
do you have paypal so i can contribute for your project work?

[Mottie]

YAY! So is it okay then to close this issue?

Oh, and I was thinking that if the scrolling is too fast you could throttle the mousewheel function a bit to slow it down. Here is a demo and the code; change the throttledDelay value (in milliseconds) by making the number bigger to slow it down more:

$('#slider').movingBoxes({
    buildNav: true,
    stopAnimation: true,
    preinit: function(e, mb, tar) {
        var throttled = false,

        // increase the throttleDelay to slow down the mouse scrolling
        throttledDelay = 100; // milliseconds

        mb.$window.mousewheel(function(event, delta) {
            if (!throttled) {
                mb.change(mb.curPanel + (delta < 0 ? 1 : -1));
                throttled = true;
                setTimeout(function(){
                    throttled = false;
                }, throttledDelay);
            }
            return false; // prevent default
        });
    }
});​

It really isn't necessary to give donate, but if you want my paypal is the same as my gmail address; user name wowmotty.

[fourgood]

yes, you can close this issue :)