title: How can I make magnific-popup open an selected item in a inline gallery?
body: <p>I am using <a href="http://dimsemenov.com/plugins/magnific-popup/documentation.html" rel="nofollow">magnific-popup</a> to display an inline gallery (with custom HTML markup), precisely like the example <a href="http://codepen.io/dimsemenov/pen/sHoxp" rel="nofollow">here</a>. This opens a gallery of custom markup, where you can click through 3 sets of avatar/name/location data. (Try the example or the code below and you'll see what I mean).</p>
  
  <p>However, I can't find a way to open the second (or anything besides the first) element on an anchor click.</p>
  
  <p>Has anyone used <a href="http://dimsemenov.com/plugins/magnific-popup/documentation.html" rel="nofollow">magnific-popup</a> and and <strong>been able to open an inline element other than the first element?</strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;button style="padding:20px;"&gt;Open popup&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 200px;
    margin: 20px auto;
    text-align: center;
  }
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>// Define data for the popup
  var data = [
    {
      username: "Brad Frost", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
      userWebsite_href: 'http://www.bradfrostweb.com', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
      userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1561258552/brad_frost_bigger.png', // Prefix "_img" is special. With it Magnific Popup finds an  element "userAvatarUrl" and replaces it completely with image tag.
      userLocation: 'Pittsburgh, PA'
    },
    {
      username: "Paul Irish",
      userWebsite_href: 'http://paulirish.com',
      userAvatarUrl_img: 'https://si0.twimg.com/profile_images/2910976341/7d972c32f3882f715ff84a67685e6acf_bigger.jpeg',
      userLocation: 'San Francisco'
  
    },
  
    {
      username: "Chris Coyier",
      userWebsite_href: 'http://css-tricks.com',
      userAvatarUrl_img: 'https://si0.twimg.com/profile_images/1668225011/Gravatar2_bigger.png',
      userLocation: 'Palo Alto, California'
    }
  ];
  
  // initalize popup
  $('button').magnificPopup({ 
    key: 'my-popup', 
    items: data,
    type: 'inline',
    inline: {
      // Define markup. Class names should match key names.
      markup: '&lt;div class="white-popup"&gt;&lt;div class="mfp-close"&gt;&lt;/div&gt;'+
                '&lt;a class="mfp-userWebsite"&gt;'+
                  '&lt;div class="mfp-userAvatarUrl"&gt;&lt;/div&gt;'+
                  '&lt;h2 class="mfp-username"&gt;&lt;/h2&gt;'+
                '&lt;/a&gt;'+
                '&lt;div class="mfp-userLocation"&gt;&lt;/div&gt;'+
              '&lt;/div&gt;'
    },
    gallery: {
      enabled: true 
    },
    callbacks: {
      markupParse: function(template, values, item) {
        // optionally apply your own logic - modify "template" element based on data in "values"
        // console.log('Parsing:', template, values, item);
      }
    }
  });
  </code></pre>