🥇 Uma galeria deslizante habilitada com zoom pinch com Swiper e iScroll

Em um projeto em que trabalhei, tinha uma galeria deslizante com páginas de revistas e
na maioria dos dispositivos as páginas não podiam ser lidas a menos que fossem ampliadas
. Como se tratava de um projeto Cordova, o ajuste natural era usando pinch-zoom
e também tap- para zoom.

A solução mais fácil que encontrei para aumentar o zoom foi o iScroll e
funcionou perfeitamente , depois que o fiz esquecer que estava em um controle deslizante
Swiper .

Todas as páginas foram dispostas com rolagem / deslizamento horizontal, esta
técnica deve funcionar bem com a troca vertical apenas originX
para originYe wrapperOffsetLeftpara wrapperOffsetTop.

As áreas do código iScroll que li para obter esta configuração:

HTML:

<div class="swiper-container">
  <div class="swiper-wraper">

      <div class="swiper-slide"> <img src="[...]"> </div>
      [... more slides ...]

  </div>
</div>

Configuração do iScroll / Swiper:

var _enableZoom = _activateZoom: (function() {
  var scroller = undefined;

  return function(swiper) {
    if(scroller !== undefined) {
      scroller.destroy();
    }

    scroller = new iScroll(swiper.activeSlide(), {
      hideScrollbar: true,
      zoom: true,
      // So Swiper will not swipe/slide when zooming is enabled
      onZoomEnd: function(e) {
        var slide = $(this.wrapper);

        if(parseInt(this.scale) == 1) {
          slide.removeClass('swiper-no-swiping');
        } else {
          slide.addClass('swiper-no-swiping');
        }
      },
      // Since the images are inside of the swiper slide it
      // got a huge left offset, but the offset isn't really
      // part of the page/image since the page is completely
      // shown within the viewable area of the viewport. So
      // simply remove the wrapperOffsetLeft from the
      // calculation and be happy.
      //
      // touchstart: When pinch-zooming
      // touchend: When double-tap zooming
      onZoomStart: function(e) {
        if(e.type === 'touchstart') {
          this.originX = Math.abs(e.touches[0].pageX + e.touches[1].pageX) / 2 - this.x;
        } else if(e.type === 'touchend') {
          this.wrapperOffsetLeft = 0;
        }
      }
    })
  };
})();


$('.swiper-container').swiper({
  noSwiping: true, // So swiping can be disabled with a class
  onSlideChangeEnd: _enableZoom,
  onFirstInit: _enableZoom
});

Related Posts