magnific passing in array

Question

我想通过一个图像列表来获取使用图像的宏观弹出窗口，但是如果我将它们作为变量传递，它将不起作用。我可以console.log变量的输出并粘贴代替宏观调用中的变量，它工作得很好。任何想法为什么传递变量在这里不起作用？

Here您可以编辑它，但您必须查看它here来测试它。

同样，您可以复制console.log的输出并粘贴它以代替变量compiledList，它的工作原理不起作用。

下面是代码...

$(function(){ 

var urlList = ["http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg"]; 


var compiledList = ('{src : \'' + urlList.join('\'}, {src : \'') + '\'}'); 


$('a').on('click',function(e){ 
e.preventDefault(); 
$.magnificPopup.open({ 
items: [compiledList], 
gallery: { 
    enabled: true 
}, 
type: 'image', 
callbacks: { 
    open: function() { 
    console.log(compiledList); 
    } 
} 
}); 
}); 
}); 

Answer 1

你在做什么目前正在一个字符串时console.log版看起来像一个物体，但事实并非如此。这里有两个简单的选项。

1. 通过包木窗每个URL与{src: "URL"}
2. 使用for loop遍历urlList，使对象的数组，只是使物体的urlList的数组。我在下面添加了这段代码。

http://jsbin.com/sokidazi/2

var urlList = ["http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg","http://img3.wikia.nocookie.net/__cb20140125162709/cartoonfatness/images/c/c0/Futurama.jpg"], 
    i = 0, 
    l = urlList.length, 
    compiledList = []; 
for(;i < l;i++){ 
    compiledList.push({src: urlList[i]}); 
} 


$('a').on('click',function(e){ 
    e.preventDefault(); 
    $.magnificPopup.open({ 
    items: compiledList, 
    gallery: { 
     enabled: true 
    }, 
    type: 'image', 
    callbacks: { 
     open: function() { 
     console.log(compiledList); 
     } 
    } 
    }); 
});