dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.48k forks source link

dynamically apply jquery selector attribute to items property during popup instantiation #1000

Open sammyart opened 7 years ago

sammyart commented 7 years ago

I have my 'items' properties saved into variables such as this:

var posters = [
  { src_img:    'img/posters/01 posters.jpg',
    title:  'Getcha Sum',
    contr:  'concept, illustration',
    usage:  'print',
    client: 'Daddy Warbucks',
    copy:   '2016'},
  { src_img:    'img/posters/02 posters.jpg',
    title:  'Blue Moon',
    contr:  'art direction and design',
    usage:  'social media',
    client: 'IBM',
    copy:   '2017' }];

I'm attempting to set the items property dynamically within the magnificpopup object based upon the id of the jQuery selector used to open each popup.

$('.portfolio figure').magnificPopup({
// want to utilize the array of objects referenced by the variable 'posters'
// when popup is instantiated by ('.portfolio figure#posters')
  items: $(".portfolio figure").attr('id'),
  inline: {
    markup:'<div class="mfp-figure">\n'+
  '<button title="Close" type="button" class="mfp-close">Close</button>\n'+
  '<figure class="inline-popup">\n'+
    '<img class="mfp-src mfp-img">\n'+
    '<figcaption>\n'+
      '<h1 class="mfp-title"></h1>\n'+
      '<dl class="dl-horizontal">\n'+
        '<dt>Contribution</dt><dd class="mfp-contr"></dd>\n'+
        '<dt>Usage</dt><dd class="mfp-usage"></dd>\n'+
        '<dt>Client</dt><dd class="mfp-client"></dd>\n'+
      '</dl>\n'+
      '<h2>&copy; <span class="mfp-copy"></span></h2>\n'+
    '</figcaption>\n'+
  '</figure>\n'+
'</div>\n';
  },
  gallery: {
    enabled: true
  }
});

How do I access the id of the jQuery selector element used to initialize the magnificPopup() object during the object's initialization?

As an aside, if it's not part of the answer I'm seeking, what does 'this' represent during the object's initialization? As an absolute javascript newb, I half expected items: this[$(".portfolio figure").attr('id')] or even items: this.id to work.