Disable/enable touch events on flexslider

Question

Im using flexslider to slide some content: http://iea.uili.com.br/v4/ the thing is that i whant to disable touch when zoom in and enable back when zoom out, the same for keyboard control!

here is the function when i click on any building to zoom in

function janelas(){     
      $('.popup').click(function() { 
        var $id = $(this).attr('class').split(' ')[2];
        $('.menu_janela').fadeOut('fast');

        $("ul.flex-direction-nav").addClass('hide');
        setTimeout(function(){
            console.log('.'+$id+'-popup')
            $('.'+$id+'-popup').fadeIn('fast');
        },600);
      });   

}

here is the function when zoom out

function fecha(){
    $('.fechaa').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
        $('.view1').click();
    });

    $('.fechab').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
        $('.view2').click();
    });

    $('.fechac').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
        $('.view3').click();
    });

    $('.zoomContainer').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
    });
}

and here is the function for the slider

function Slider(){
    $captions = $('.captions');
        $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationSpeed: 1500,
        controlNav: false,
        keyboard: true,
        touch: true,
        start: function(slider) {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.text()); 
            $('.loading-container').fadeOut(function() {
              $(this).remove();
            });
            $('.centro').centro();

            janelas();
            fecha();
        },
        before: function(slide) {

        },
        after: function(slide) {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.text());

        },
        end: function(slide) {
        },
    });
}

Answer 1

I had a similar problem, but I had to disable the slider when the user selects a text from any of the slides - because when you select a text after that slide the slider - the selection stays visible, although you're on another slide. Pretty weird :) … So, what I did is:

1. Made a function that's called on every 200ms and sets a global variable to true or false, depending on that if any text is selected or not.

2. Added three if statements in the slider code, that checks this variable, and if there is a selected text - then I'm not changing the slide.

The three places are inside the onTouchStart, onTouchMove and onTouchEnd internal callbacks, and the code inside them executes only if no text is selected.

I'm still improving this, but decided to share the progress so far :) …