Magnific pop up on image click opens in the browser

Question

I am using magnific popup in my phonegap app.

This is how I am using it

<div class="comment-div"> 
 <a class="image-link"href="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png"> 
 <img src="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png" alt="Smiley face"></a>  
</div>

<div class="comment-div"> 
 <a class="image-link"href="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"> 
 <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" alt="Smiley face"></a>  
</div>

<div class="comment-div"> 
 <a class="image-link"href="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg"> 
 <img src="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" alt="Smiley face"></a>  
</div>

I have included the required JS and CSS file from the github.

The script which I have is as below.

$(document).ready(function() {
    $('.image-link').magnificPopup({
    type: 'image',
    mainClass: 'mfp-with-zoom', // this class is for CSS animation below
    gallery:{
    enabled:true
    ,

    zoom: {
    enabled: true, // By default it's false, so don't forget to enable it

    duration: 300, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function

    opener: function(openerElement) {

    return openerElement.is('img') ? openerElement : openerElement.find('img');
        }
       }
      });
    });

When I run this on my android mobile and click on the image, the image simply opens up in the browser, instead of getting open as per the gallery.

What am I doing wrong?

Answer 1

 $(document).ready(function() { $('.image-link').magnificPopup({ type: 'image', mainClass: 'mfp-with-zoom', // this class is for CSS animation below gallery:{ enabled:true, zoom: { enabled: true, // By default it's false, so don't forget to enable it duration: 300, // duration of the effect, in milliseconds easing: 'ease-in-out', // CSS transition easing function opener: function(openerElement) { return openerElement.is('img') ? openerElement : openerElement.find('img'); } } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script> <div class="comment-div"> <a class="image-link" href="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png"> <img src="http://webcareinfoway.com/images/Web_pics/android-logo-transparent.png" alt="Smiley face"></a> </div> <div class="comment-div"> <a class="image-link"href="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"> <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" alt="Smiley face"></a> </div> <div class="comment-div"> <a class="image-link"href="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg"> <img src="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" alt="Smiley face"></a> </div> 

Please check the code.

There is mainly change in the CDN i used for the magnificPopup And please add the jquery before magnificPopup CDN

thanks hope works for you