великолепная передача в массиве

Я пытаюсь передать список изображений, чтобы получить великолепное всплывающее окно для использования изображений, однако, если я передам их в качестве своей переменной, это не сработает. Я могу console.log вывести переменную и вставить ее вместо переменной в вызове magnific, и все работает нормально. Любые идеи, почему передача переменной здесь не работает?

Здесь вы можете отредактировать его, однако вы должны просмотреть здесь, чтобы проверить это.

Опять же, вы можете скопировать вывод 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);
  }
}
});
});
});

javascript jquery magnific-popup
person bjrdesign    schedule 01.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В настоящее время вы создаете String, которая при console.loged выглядит как объект, но это не так. Вот 2 простых варианта.

  1. Просто сделайте urlList массивом объектов, обернув каждый URL-адрес {src: "URL"}
  2. Используйте for loop для перебора 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);
      }
    }
  });
});
person Adam Merrifield    schedule 01.04.2014