Question

现在可能已经太长了，但似乎无法获得使用我的Kirby网站的packery / imagesLoaded组合。我得到臭名昭着的图片重叠。以下是我将imageURL输入标签的位置。

<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>

我知道有很多人有同样的问题我尝试了其他一些解决方案，例如this one，但无济于事。这与我提供图像的方式有关吗？非常感谢任何信息和帮助。

Answer 1

这对我来说就像一个魅力！

<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>

与Packery和ImagesLoaded的图像重叠问题与通过PHP提供的图像

1 个答案: