Question

我正在使用这个名为magnific popup的插件。但我不知道如何动态地将数据传递给magnificPopup（{}）;

它使用类似这样的东西

$('#show').magnificPopup({
                items: [
                  {
                    src: 'path-to-image-1.jpg'
                  },
                  {
                    src: 'http://vimeo.com/123123',
                    type: 'iframe' // this overrides default type
                  },
                  {
                    src: $('<div>Dynamically created element</div>'),
                    type: 'inline'
                  },
                  {
                    src: '<div>HTML string</div>',
                    type: 'inline'
                  }
            });

我不确定items对象是数组还是JSON ..

到目前为止，我已经设法用

创建自己的数组

    itemsPath[i][0] = 1 //id
    itemsPath[i][1] = 'a.jpg'
    itemsPath[i][0] = 1
    itemsPath[i][1] = 'u.jpg''
    itemsPath[i][0] = 1
    itemsPath[i][1] = 'e.jpg'
    itemsPath[i][0] = 1
    itemsPath[i][1] = 'r.jpg''
    itemsPath[i][0] = 2
    itemsPath[i][1] = 'y.jpg''

它是一个多维数组，我存储了id和图像文件名。我的问题是如何在magnificPopup（{}）中传递它;上面的功能??

请帮助

Answer 1

magnificPopup期待项目的对象数组。因此，您需要将二维数组转换为对象数组。 http://jsfiddle.net/blaird/c2k5af4j/

$(document).ready(function () {
    var itemsPath = [[1,'http://lorempixel.com/400/200/cats/1'],[1,'http://lorempixel.com/200/200/cats/2'],[1,'http://lorempixel.com/100/200/cats/3'],[1,'http://lorempixel.com/400/400/cats/4'],[2,'http://lorempixel.com/40/200/cats/5']];
//    var itemsPath = [[1,'a.jpg'],[1,'u.jpg'],[1,'e.jpg'],[1,'r.jpg'],[2,'y.jpg']];

    var items = [];
    for (i = 0; i < itemsPath.length; i++) {
        items.push({
            src: itemsPath[i][1]
        });
    }

    $('#open-popup').magnificPopup({
        items: items,
        gallery: {
          enabled: true
        },
        type: 'image' 
    });
});

有很多方法可以使用magnificPopup，这只是一个例子。

我应该将什么样的对象/变量传递给这个函数

1 个答案: