how to get data attributes on magnific pop up?

Question

Is there a way to get the data attribute using magnific popup? I have a for loop statement, and to get the id for each data i added the data-item attribute.

<?php foreach ($showItems as $items) { ?>

<tr>
    <td><?php if(!empty($items['ItemCode'])) echo $items['ItemCode'], ' '; ?><input type="hidden" name="pid" id="pid" value="<?php echo $items['ItemCode']; ?>" /></td>
    <td><img src="" /></td>
    <td><?php if(!empty($items['Name'])) echo $items['Name'], ' '; ?></td>
    <td><?php if(!empty($items['Price'])) echo $items['Price'], ' '; ?></td>
    td><?php if(!empty($items['Description'])) echo $items['Description'], ' '; ?></td>
            <td><input type="text" name="qty" id="qty" maxlength="3" size="2" /></td>
            <td ><a class="popup-modal" href="#test-modal" data-item="111" >Add To Registry</a></td>

</tr>

<?php } ?>

i test to get the item using the alert function once magnific popup triggered.

    $('.popup-modal').magnificPopup({
         preloader: true,
         callbacks : {

        open : function(){


        var self = $(this); 

        var id = self.data('item');

     alert(id);

  // });
}

Answer 1

I was looking for this and finally found the answer on this post

Just copy/pasting the solution here for the sake of saving time to other users, thank @stefanz and @Konpaka:

---

$('.popup').magnificPopup({
  type : 'image',
  callbacks : {
    open : function(){
      var mp = $.magnificPopup.instance,
          t = $(mp.currItem.el[0]);

      console.log( t.data('custom') );
    }
  }
});

---

For Magnific Popup v0.9.8:

var magnificPopup = $.magnificPopup.instance,
          cur = magnificPopup.st.el;
console.log(cur.attr('myatt'));

Answer 2

just use

var id=self.attr('data-item');

instead of

var id = self.data('item');