Search code examples
magnific-popup

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


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!


Solution

  • <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