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=""属性他们在模板中。

这有帮助吗？

在Laravel中混合使用PHP和Javascript

1 个答案: