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); 
     } 
    } 
    }); 
});