Photoswipe не отображает некоторые изображения в приложении Rails - PullRequest
Новая
       17

Photoswipe не отображает некоторые изображения в приложении Rails

0 голосов
/ 01 октября 2018

У меня есть галерея изображений, и, нажав на них, открывается Photoswipe.Когда я начинаю перечислять изображения, некоторые из них не отображаются, вместо изображения я вижу только черный экран.Но когда я перезагружаю страницу, нажимаю на изображение - все они отображаются в слайдере Photoswipe.Вот код моей страницы: 

<div class="row collapse full-width gallery-images" data-amount="<%= images.length %>">
  <% images.each_with_index do |image, index| %>
    <% if (index + 1) % 5 == 0 || (index + 2) % 5 == 0 %>
      <div class="large-6 columns">
        <%= link_to image_tag(image.file_name.url(:gallery),
                              alt: File.basename(image.file_name.url),
                              class: 'gallery-item'), '#' %>
      </div>
    <% else %>
      <div class="large-4 columns">
        <%= link_to image_tag(image.file_name.url(:gallery),
                              alt: File.basename(image.file_name.url),
                              class: 'gallery-item'), '#' %>
      </div>
    <% end %>
  <% end %>
</div>

<script>
  let galleryImages = $('.gallery-item');
  let galleryImagesArray = [];

  function collectArrayOfImages(image, array) {
    let imageSrc = image.attr('src');
    let img = new Image();
    img.src = imageSrc;
    array.push({
      src: imageSrc,
      w: img.width,
      h: img.height
    })
  }

  galleryImages.each(function () {
    collectArrayOfImages($(this), galleryImagesArray);
  });

  function photoswipeInit(e, i, array) {
    e.preventDefault();
    // init Photoswipe

    let pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    let items = array;

    // define options (if needed)
    let options = {
      // optionName: 'option value'
      // for example:
      index: i, // start at first slide
      history: false
    };

    // Initializes and opens PhotoSwipe
    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
  }

  for(let i = 0; i < galleryImages.length + 1; i++) {
    galleryImages.eq(i).click(function (e) {
      photoswipeInit(e, i, galleryImagesArray);
    });
  }
</script>

Может ли это быть turbolinks, если да, как я могу это исправить?Есть идеи, что это может быть?Спасибо вперед.

1 Ответ

0 голосов
/ 01 октября 2018

Я обнаружил, что в массиве изображений ширина и высота были установлены на 0. Поэтому мне пришлось поместить свою функцию в setTimeout: 

function collectArrayOfImages(image, array) {
    setTimeout(() => {
      let imageSrc = image.attr('src');
      let img = new Image();
      img.src = imageSrc;
      array.push({
        src: imageSrc,
        w: img.width,
        h: img.height
      });
    }, 1000);
  }

Кажется, что по какой-то причинефункция не смогла обработать процесс заполнения массива.

...