在 Laravel 中混合 PHP 和 Javascript

Question

我在我的项目中使用 PhotoSwipe 以一种很酷的渐进方式显示照片。

我想遍历排列和图像之间的关系。 我可以用 console.log() 打印出图像的数量。它有效。

1 个问题： 我想动态获取图像数量并在items: 中显示它们如何？

2 问题：如何动态检索照片的尺寸，例如宽度和高度？我假设可能有一些方法，如getOriginalHight() 之后我想将值分配给w: 和h:

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

    // build items array
    for (i = 0; i < "{{count($arrangement->images)}}"; i++) {
        console.log(i);
    }
    let items = [
        {
            src: '/storage/arrangement_images/{{$arrangement->images[1]->file_name}}',
            w: 500,
            h: 281
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];

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

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

Answer 1

回答问题 1：

使用 JQuery 来执行此操作。假设您的 .php 文档中有多个图像，请使用 JQuery 的 $.each() 函数循环图像并构建 items 数组。所以它看起来像这样：

var items = [],
    $img = $('.pswp');

$img.each(function() {
  var $this = $(this),
      imageSize = [1280, 980],
      obj = {
        src: $this.attr('src'),
        w: imageSize[0],
        h: imageSize[1]
      };

  items.push(obj);
});

在这里，我使用imageSize var 设置了JS 中每个图像项的宽度/高度，但是如果您在模板中定义它们，也可以使用图像的width="" 和height="" 属性。

这有帮助吗？