title: Add data to items in Magnific Popup
body: <p>I want to add additional data to go along with each additional item in a gallery, in this case a project name in addition to the caption. I have a working version on <a href="http://codepen.io/neslho/pen/ozjIt" rel="nofollow"><strong>Codepen</strong></a> (also below) using the <code>markupParse</code> callback and storing the Project Name info in a separate array, but it seems like there is probably a more efficient method using the Magnific Popup API. Is there a way to store this information with the <code>item</code> object, maybe even have the rendered html be cached?</p>
  
  <p>In the sample code I have created an extra div called <code>&lt;div class="my-project"&gt;&lt;/div&gt;</code> inside the <code>markup</code> variable and place the the Project Name data from the <code>galleryProject</code> array using the <code>markupParse</code> callback.</p>
  
  <pre><code>$('#gallery').magnificPopup({
  
      type: 'image',
  
      items: [
        {
          src: 'img1.jpg',
          title: 'Caption 1'
        },
        {
          src: 'img2.jpg',
          title: 'Caption 2'
        },
        {
          src: 'img3.jpg',
          title: 'Caption 3'
        }
      ],
  
      gallery: {
        enabled: true
      },
  
      image: {
        markup: '&lt;div class="mfp-figure"&gt;'+
                  '&lt;div class="mfp-close"&gt;&lt;/div&gt;'+
                  '&lt;div class="mfp-img"&gt;&lt;/div&gt;'+
                  '&lt;div class="mfp-bottom-bar"&gt;'+
                '&lt;div class="my-project"&gt;&lt;/div&gt;'+
                    '&lt;div class="mfp-title"&gt;&lt;/div&gt;'+
                    '&lt;div class="mfp-counter"&gt;&lt;/div&gt;'+
                  '&lt;/div&gt;'+
                '&lt;/div&gt;'
      },
  
      callbacks: {
        markupParse: function(template, values, item) {
          var index = this.currItem.index;
          template.find('.my-project').html( galleryProject[index] );
        }
      }
  
  
  });
  
  var galleryProject = ['Project 1','Project 2','Project 3'];
  </code></pre>