title: Add Zoom In/Out on Single Click Owl Carousel
body: <p>Is there a way to add gallery like feature to owl. I mean I want to zoom in/out slide on click and also on zoom in grab/drag the zoomed area.
  I tried it like:</p>
  
  <pre><code>$(document).ready(function() {
  
    $("#owl-demo").owlCarousel({
      items : 10
    });
  
    $('.link').on('click', function(event){
      var $this = $(this);
      if($this.hasClass('clicked')){
        $this.removeAttr('style').removeClass('clicked');
      } else{
        $this.css('background','#7fc242').addClass('clicked');
      }
    });
  
  });
  </code></pre>
  
  <p>Slide zooms but on drag owl's main drag function runs and move to next slide. I want owl to work like <a href="https://github.com/dimsemenov/PhotoSwipe" rel="nofollow noreferrer">PhotoSwipe</a> does.
  The only issue with PhotoSwipe is that it opens in fullscreen lightbox view. I also tried <a href="http://jaukia.github.io/zoomooz/" rel="nofollow noreferrer">zoomooz</a> on click but it don't support dragging.</p>
  
  <p>Can anyone guide me how to add these functionalities?</p>