Enabling Mobile Support

[action-simon]

Hello.

I am using MovingBoxes which I really love.

But I run into a issue and want to ask if it's possible to enable Mobile/Touchpad Support for Mobile Devices like the iPad, iPhone or Android Phones.

I mean that you can slide the images with your finger on this devices.

[Mottie]

Hi action-simon!

I don't have an iPad, but I think just touching the outer panels or the arrows would change the slide. Or do you mean you'd like swipe support?

[action-simon]

Hello!

Yes I am taking about the swipe support. Touching the arrows or the outer areas does work of course ;)

[Mottie]

Ok, I'll look into making a demo for you soon... I have other distractions today =(

[action-simon]

Oh many thanks in advance! Very nice from you.

[Mottie]

Ok, here is a demo of swipe support... it's a bit of code, but all you need to do is include it inside of a document ready event with the correct target - check out the demo:

jQuery(function($){

    $('#slider').movingBoxes({
        startPanel: 4,
        wrap: true,
        buildNav: true,
        navFormatter: function(index, panel) {
            return "●";
        }
    });

    /* Add Swipe to Moving Boxes */
    var target = $('#slider'),
    // allow movement if < 1000 ms (1 sec)
    maxTime = 1000,
    // swipe movement of 50 pixels triggers the swipe
    maxDistance = 50,

    api = target.data('movingBoxes'),
    startX = 0,
    startTime = 0,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';

    api.$wrap.on(startEvent, function(e) {
        // prevent image drag (Firefox)
        e.preventDefault();
        startTime = e.timeStamp;
        startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
    })
    .on(endEvent, function(e) {
        startTime = 0;
        startX = 0;
    })
    .on(moveEvent, function(e) {
        e.preventDefault();
        var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
        if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
            if (currentX < startX) {
                // swipe left code here
                api.goForward();
            }
            if (currentX > startX) {
                // swipe right code here
                api.goBack();
            }
            startTime = 0;
            startX = 0;
        }
    });​

});

If you are using an older version of jQuery (before v1.7), then replace the on functions with bind.

[action-simon]

Oh thank you so much!! Very nice support from you, I have to say.

[action-simon]

Hello. It is me again.

Finally I had time to implement it on the site, but now I have the problem that only Swipe is working on the Movingbox with the ipad.

If i click on the non active slides or the nav arrows or thumbnails nothing happens. On PC it is still working.

Edit: It is the same issue on the demo you have posted as well just to be sure it is not on my end ;)

It seems that all href links are not working. (Within slider div)

[Mottie]

Try changing the api.$wrap to api.$window and see if that fixes it :)

[action-simon]

Oh wow. Many thanks. It is working like a charm now.

Edit: Links are working on the Thumbnails and arrows now. But still not on the Slides itself.

<div>
            <h2>Text 1</h2>
            <a href="http://www.google.com" target="blank" class="joabild"><img src="..." alt="picture"></a>
            <h2>Even more text <span class="bla">Bla</span></h2>
            <p>
                 And more text<a href="#">mehr</a>
            </p>
        </div>

[Mottie]

LOL ok, lets go one more level deep... change the code to api.$panels

[action-simon]

Nope. I'm afraid thats not working.

Maybe it is useful posting the complete js?

function fnIsAppleMobile() {
    if (navigator && navigator.userAgent && navigator.userAgent != null) {
        var strUserAgent = navigator.userAgent.toLowerCase();
        var arrMatches = strUserAgent.match(/(iphone|ipod|ipad|android)/);
        if (arrMatches)
            return true;
    }
    // End if (navigator && navigator.userAgent) 
    return false;
}
jQuery(function($){

    $('#slider').movingBoxes({
        startPanel: 4,
        reducedSize: 0.9,
        initAnimation: true,
        hashTags: false,
        wrap: true,
        buildNav: true,
        speed: 500,
        stopAnimation: true,
        fixedHeight: true,
        easing: 'easeOutBack',
        navFormatter: function(index, panel) {
            return "●";
        }
        preinit: function(e, mb, tar) {

            if (fnIsAppleMobile() == false) {
            var throttled = false,
            throttledDelay = 200;
            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;
            });
}

        }
    });
        if (fnIsAppleMobile() == true) { 
    /* Add Swipe to Moving Boxes only when the user Agent is an Smartphone */
        var target = $('#slider'),
        // allow movement if < 1000 ms (1 sec)
        maxTime = 1000,
        // swipe movement of 50 pixels triggers the swipe
        maxDistance = 50,

        api = target.data('movingBoxes'),
        startX = 0,
        startTime = 0,
        touch = "ontouchend" in document,
        startEvent = (touch) ? 'touchstart': 'mousedown',
        moveEvent = (touch) ? 'touchmove': 'mousemove',
        endEvent = (touch) ? 'touchend': 'mouseup';

        api.$panels.on(startEvent, function(e) {
            // prevent image drag (Firefox)
            e.preventDefault();
            startTime = e.timeStamp;
            startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX: e.pageX;
        }).on(endEvent, function(e) {
            startTime = 0;
            startX = 0;
        }).on(moveEvent, function(e) {
            e.preventDefault();
            var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX: e.pageX,
            currentDistance = (startX === 0) ? 0: Math.abs(currentX - startX),
            // allow if movement < 1 sec
            currentTime = e.timeStamp;
            if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
                if (currentX < startX) {
                    // swipe left code here
                    api.goForward();
                }
                if (currentX > startX) {
                    // swipe right code here
                    api.goBack();
                }
                startTime = 0;
                startX = 0;
            }
        });
        } else {
        // Disable Image Dragging
        $("#slider img").mousedown(function() {
            return false;
        });
    }; 

});

[Mottie]

I think that code is just missing a comma before the preinit function (updated demo)

},
preinit: function(e, mb, tar) {

[action-simon]

Sorry for the delay but I was busy. ;) I had already this comma in my JS. Maybe I made a mistake copy/pasting the code in here.

So sadly it is still not working.

Oh and the links are only clickable on the arrows and thumbnails. So the links next to the active slide are not working as well.

[Mottie]

Well, all I can think of is to remove the e.preventDefault(); from the start event.

[action-simon]

Oh many thanks! Finally it is working like I want. Thank you very much. :)