Manually set Touch after Flexslider is Initialized

[PromInc]

I have a 360 degree image in a series of images loaded via Flexslider. The 360 degree image requires dragging functionality to make it rotate. However when I attempt to rotate the 360 degree imgae it rotates as well as slides the Flexslider.

If I set touch=false when I load the Flexslider all works well, with the exception of not being able to swipe through the non-360 degree images within the Flexslider.

For that reason, I'm trying to manually set touch=false on the 360 degree images only (user would use manual controls to navigate the Flexslider when on those images). I say trying to do this because I'm having no success, and in looking at the source code I'm getting the impression that there's no way to modify the touch property after it's been loaded. Has anyone else had a similar issue or have suggestions on how to fix this?

FYI I'm using version 2.4.0 if that makes a difference.

[jeffikus]

Hi there

Please test with 2.5.0 and let me know if the issue persists.

Thanks,

[PromInc]

Sadly upgrading versions didn't fix it either.

Here is my code:

var isTouch = true;
function monitor360Images(s){
    if( isTouch ) {
        j$("#carousel li.image360").bind('touchstart', function(e){
            console.log( "Monitor - Touch" );
            var thisElm = j$(this);
            thisElm.bind('touchmove', function(eMove){
                console.log( "Monitor - Movement" );
                j$('#carousel').flexslider({ touch: false });
            });
        });
    }
}

j$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 600,
    touch: isTouch,
    sync: "#slider",
    prevText: "",
    nextText: "",
    after: function(s){
        monitor360Images(s);
    }
});

I can create the flexslider just fine with j$('#carousel').flexslider({...});.

I then call the after callback to load a function that will detect if the user is on a touch device and if the touch occurred on a 360 image. The console.log calls indicate that I'm getting into the function just fine, and then I try calling j$('#carousel').flexslider({ touch: false }); to change the touch parameter. This is where I'm having the issue - this parameter isn't setting.

I did find a solution for setting the touch parameter, in issue #334. I applied the patch suggested by @joshbenner with the modification suggested by @zimarai and am able to now set the touch parameter on the fly. Here is my modified code, using the new setOpts method.

var isTouch = true;
function monitor360Images(s){
    if( isTouch ) {
        j$("#carousel li.image360").bind('touchstart', function(e){
            console.log( "Monitor - Touch" );
            var thisElm = j$(this);
            thisElm.bind('touchmove', function(eMove){
                console.log( "Monitor - Movement" );
                j$('#carousel').data('flexslider').setOpts({touch: false});
            });
        });
    }
}

j$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 600,
    touch: isTouch,
    sync: "#slider",
    prevText: "",
    nextText: "",
    after: function(s){
        monitor360Images(s);
    }
});

With this patch in place, the touch parameter is set to true on page load, and then once movement is recognized via the 360 image it gets changed to false from the setOpts function. Despite the value being set to false, the slider still acts as if it were set to true.

As a sanity check I tried one other block of code, removing my touch detection completely and just setting the touch parameter on page load. The purpose of this was to prove to myself that the parameter does work - which it does. With this set to false touch movements do not affect the slider.

j$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 600,
    touch: false,
    sync: "#slider",
    prevText: "",
    nextText: ""
});

Is there a different method in which I need to set the touch parameter programitically? Do I need to somehow re-initialize the slider after changing this parameter? Thank you for any assistance.

[jeffikus]

Hi there, I would definitely try to re-init the slider with that var change and see if that solves the issue. There is a touch() method on which you could call on the slider itself though. Not sure if that helps.

Let me know and we can take this further. Reopen when you are ready.

[insaneness]

Exact same issue on my side. I cannot re-init completely the slider as this cause visual glitch.
The 'touch' vars is set to false but even after a slider.setup() or slider.init(), the touch behaviour is still there.
Anyone managed to resolve this ?
Any help will be appreciated

[PromInc]

I never did find a solution, or more like never had a chance to get back to this and no longer work for that website anymore... So I'm sure the bug is still on that site sadly...

[insaneness]

Thank you for your fast feedback on this. I'll keep on trying then...