CODEWITHSUNDEEP
javascriptjquerymagnific-popup
bjrdesign
bjrdesign

Reputation: 142

magnific passing in array

I am trying to pass in a list of images to get magnific popup to use the images however if I pass them in as their variable it does not work. I can console.log the output of the variable and paste that in place of the variable in the magnific call and it works just fine. Any ideas why passing the variable here does not work?

Here you can edit it however you must view it here to test it.

Again, you can copy the output of the console.log and paste it in place of the variable compiledList and it works just does not work as a variable.

Below is the code... 

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

Upvotes: 0

Views: 535

Answers (1)

Adam Merrifield
Adam Merrifield

Reputation: 10407

What you're doing currently is making a String which when console.loged looks like an object, but it's not. Here are 2 easy options.

  1. Just make the urlList an array of objects by wraping each url with {src: "URL"}
  2. Use a for loop to iterate over urlList and make an array of objects. I've added this code below.

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

Upvotes: 1

Related Questions