CODEWITHSUNDEEP
javascriptjquerymagnific-popup
Jens Törnell
Jens Törnell

Reputation: 24768

Magnific Popup object

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

Question

How is it done correctly?

Upvotes: 2

Views: 5049

Answers (2)

Dmytro Semenov
Dmytro Semenov

Reputation: 4616

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

Upvotes: 7

Jens T&#246;rnell
Jens T&#246;rnell

Reputation: 24768

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

Magnific popup: Get current element in callback

Upvotes: 0

Related Questions