Fancybox + Flickity. проблема ориентации iOS - PullRequest
Новая
       10

Fancybox + Flickity. проблема ориентации iOS

0 голосов
/ 29 августа 2018

В модальном окне Fancybox у меня есть карусели Flickity. На iPad, когда я меняю ориентацию, Flickity перестает работать правильно. flickity-viewport отображается как 0px. Никаких проблем с изменением размера окна рабочего стола. Не уверен, как обновить Flickity при изменении ориентации на iPad.

https://jsfiddle.net/2zb5qesa/13/embedded/result/

$(document).ready(function() {
  $('.carousel-container').each( function( i, container ) {
    var $container = $( container );
    // main Flickity
    var $carouselMain = $container.find('.carousel-main').flickity({
      imagesLoaded: true,
      percentPosition: false,
      pageDots: false,
      adaptiveHeight: true
    });
    // nav Flickity
    $container.find('.carousel-nav').flickity({
      asNavFor: $carouselMain[0],
      contain: true,
      pageDots: false,
      groupCells: true,
      adaptiveHeight: true,
      prevNextButtons: false
    });
  });

  $("[data-fancybox]").fancybox({
    idleTime : false,
    smallBtn: false, 
    buttons : [
      'close'
    ],
    touch : {
       vertical : false,
       momentum : false
    },
    wheel : false,
    afterShow: function( instance, slide ){
      slide.$slide.find('.carousel-main').flickity('resize');
      slide.$slide.find('.carousel-nav').flickity('resize');
    }
  });
});
.carousel {
  background: #FAFAFA;
  margin-bottom: 40px;
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.carousel-nav .carousel-cell {
  height: 80px;
  width: 100px;
}

.carousel-nav .carousel-cell:before {
  font-size: 50px;
  line-height: 80px;
}

.carousel-nav .carousel-cell.is-nav-selected {
  background: #ED2;
}

.modal-window {
	width: 985px;
	padding: 0;
	background: none;
}
.modal-window-inner {
	width: 980px;
	padding: 40px;
	position: relative;
	background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/flickity@2.1.2/dist/flickity.css" rel="stylesheet"/>
<a data-src="#p1" href="javascript:;" data-fancybox="gallery">MODAL 1</a>
<a data-src="#p2" href="javascript:;" data-fancybox="gallery">MODAL 2</a>

<div style="display: none;" id="p1" class="modal-window">
  <div class="modal-window-inner">
    <div class="carousel-container">
      <div class="carousel carousel-main">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-main -->
      <div class="carousel carousel-nav">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-nav -->
    </div>
    <!-- /.carousel-container -->
  </div>
  <!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->

<div style="display: none;" id="p2" class="modal-window">
  <div class="modal-window-inner">
    <div class="carousel-container">
      <div class="carousel carousel-main">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-main -->
      <div class="carousel carousel-nav">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-nav -->
    </div>
    <!-- /.carousel-container -->
  </div>
  <!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->

1 Ответ

0 голосов
/ 29 августа 2018

Я думаю, это потому, что fancybox на мгновение скрывает содержимое события изменения ориентации устройства, возможно, попробуйте добавить его для fancybox и посмотрите, помогает ли: 

onUpdate : function( instance, slide ) {
    slide.$slide.find('.carousel-main').flickity('resize');
    slide.$slide.find('.carousel-nav').flickity('resize');
}
...