Magnific Popup object

Question

Magnific Popup

I use Magnific Popup, a jQuery lightbox like plugin. I try to use the built in object to get an attribute.

It does not work the way I thought it would. I've read the API here:

http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

What I tried so far

I get the object in the console but I can't get an attribute from it. (the jquery ready looks a bit different (alias) because it's used in WordPress)

<script>
jQuery(document).ready(function($) {
    $('.image-link').magnificPopup({
        type:'image',
            callbacks: {
                open: function() {
                    var magnificPopup = $.magnificPopup.instance;
                    console.log(magnificPopup.currItem);
                    window.location.hash = $(magnificPopup.currItem).attr('data-slug');
                    }
            }
    });
});
</script>
<a href="http://www.someimage.com/image.png" data-slug="my-slug">

Own thougts

This is not an object like $(this) and will not work the same?
I call it the wrong way?
I use the wrong object for this problem?

Question

How is it done correctly?

Dmitry Semenov · Answer 1 · 2013-06-14T15:00:37.340

7

currItem is a Magnific Popup data object, it's not a DOM element. This object contains data about opened element - image path, flags if it's loaded or not e.t.c.

You can access DOM element that opened popup via $.magnificPopup.instance.currItem.el.

Also, if you're executing the code from open callback, you can use this instead of $.magnificPopup.instance:

this.currItem.el

edited Jun 14 '13 at 15:00

answered Jun 14 '13 at 14:50

Dmitry Semenov

4,566
2
36
39

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

After publishing my post I found a related post that solved this problem:

Magnific popup: Get current element in callback

edited May 23 '17 at 10:29

Community

1
1

answered Jun 14 '13 at 14:50

Jens Törnell

23,180
45
124
206

Magnific Popup object

2 Answers2