Проблема с перекрытием изображений с помощью Packery и ImagesLoaded с изображениями, обслуживаемыми через PHP

Я занимаюсь этим, может быть, слишком долго, но, похоже, не могу заставить комбинацию packery/imagesLoaded работать с моим сайтом Kirby. Я получаю печально известное перекрытие картинок. Ниже я ввожу URL-адрес изображения в тег.

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>

  <?php foreach($projects as $project): 

      $project_image = $project
        ->files()
        ->filterBy('type', 'image')
        ->shuffle()
        ->first();
  ?>

  <div class="grid-item">
  <?php 
    <img src="<?= $project_image->url() ?>" alt="<?= $project->title()->html() ?>" class="showcase-image" /> 
  ?>
    <div class="showcase-name left">
        <p class="showcase-title"><?= $project->title()->html() ?></p>
        <p class="showcase-occupation"><?= $project->occupation()->html() ?></p>
    </div>

  </div>

  <?php endforeach ?>

И здесь я инициализирую packery и imagesLoaded в нижнем колонтитуле:

 <script>
    // init Packery


    $(document).ready(function() {
      var $grid = $('.grid').packery({
        itemSelector: '.grid-item',
        gutter: '.gutter-sizer',
        columnWidth: '.grid-sizer',
        percentPosition: true
      });
      // layout Packery after each image loads
      $('.grid').imagesLoaded().progress( function() {
        $('.grid').packery();

        });
      });

  </script>

Я знаю, что есть куча людей с такой же проблемой, и я пробовал некоторые другие решения, такие как это, но безрезультатно. Связано ли это с тем, как я подаю изображения? Любая информация и помощь очень ценятся.


packery kirby imagesloaded
person Chaz    schedule 28.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это сработало для меня как шарм!

<script src="/assets/templates/site/js/imagesloaded.pkgd.js" type="text/javascript"></script>
<script src="/assets/templates/site/js/packery.pkgd.js" type="text/javascript"></script>

<script>
var $grid = $('.packery').packery({});

$grid.imagesLoaded().progress( function() {
      $grid.packery();
    });

</script>
person muneebbug    schedule 22.11.2020