Magnific-popup: how to get image url from <img src="...">?

Question

Is it possible to force magnific-popup to get image url from 'src' attribute of img tag? This way there would be no need to wrap img with a tags. I tried the code below, but it doesn't work. Returned error is 'undefined' url.

<script type="text/javascript">
  $(document).ready(function(){
    $('div.gallery').magnificPopup({delegate: 'img'.attr('src') , type: 'image', gallery:{enabled:true}
    });
  });
</script>

Anyways, is there any option to do with 'img' only, without 'a' tags? Thanks!

Answer 1

<script type="text/javascript">
  $(document).ready(function(){
    $('div.gallery').magnificPopup({delegate: 'img' , type: 'image', gallery:{enabled:true},

     callbacks: {
          elementParse: function() { this.item.src = this.item.el.attr('src'); }
     }

    });
  });
</script>

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

Answer 2

I actually have not worked, and I found how to do . Now the script when clicking pictures increases and creates a gallery of them .

<script type="text/javascript">
  $(document).ready(function() {
                $('#text').magnificPopup({
                    delegate: 'img',
                    type: 'image',
                    gallery: {
                        enabled: true
                    },
                    callbacks: {
                        elementParse: function(qw) {
                            qw.src = qw.el.attr('src');
                        }
                    }


                });
            });
</script>

Answer 3

With magnificPopup 1.1.0

now you have to do like this if you want it to work.

   $(document).ready(function() {
        $('.myClass').magnificPopup({
            type: 'image',
            callbacks: {
                elementParse: function(item) {
                    item.src = item.el.attr('src');
                }
            }
        });
    });

Answer 4

The accepted answer didn't work for me, either. I ended up using the data-mfp-src attribute, which overrides the value in the href one (as mentioned here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types).

Instead of adding the attribute manually (duplicating the src of the image), I just copied the src value in data-mfp-src attributes for all images before the magnificPopup call. Something like this:

var popupImages = $('div.withPopups img');
popupImages.each(function(){
    $(this).attr('data-mfp-src', $(this).attr('src'));
});
popupImages.magnificPopup({type: 'image'});