jQuery Magnific Popup根本不起作用

Question

I have an issue with the jQuery Magnific Popup plugin, I did what I read in the documentation but it doesn't work, when I click on the link the image don't open in a popup. And I have no errors.

<a class="thumbnail" href="{{case.image}}" title="{{case.description}}">
    <img ng-src="{{case.image}}">
</a>

<script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').magnificPopup({
            type: 'image', 
            delegate: 'a'
        });
        console.log('ok'); 
    });
</script>

I'm so sorry if it's a newbie mistake, but I looked everywhere and I don't see what's wrong, nothing wrong in the console ... Maybe there is a problem with AngularJs, but I am not an expert ...

Thank you a lot for your help.

I hosted my app to help you see what's wrong : http://azilizblanchet.fr/CameleonCatalogue/#/services

Answer 1

Magnific popup requires the href attribute on the element. Just add it to the image tag and it should work.

<img ng-src="{{case.image}}" href="{{case.image}}">

Answer 2

Try to remove delegate option.

Just:

<script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').magnificPopup({
            type: 'image'
        });
        console.log('ok'); 
    });
</script>