在浏览器中打开图像时会弹出大量弹出窗口答案

【问题标题】：Magnific pop up on image click opens in the browser在浏览器中打开图像时会弹出大量弹出窗口
【发布时间】：2017-05-05 11:11:14
【问题描述】：

我在 phonegap 应用中使用magnific popup。

这就是我使用它的方式

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

我已经从 github 包含了所需的 JS 和 CSS 文件。

我的脚本如下。

$(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');
        }
       }
      });
    });

当我在我的安卓手机上运行它并点击图片时，图片只是在浏览器中打开，而不是按照图库打开。

我做错了什么？

【问题讨论】：

能否添加您用于“magnificPopup”功能的外部库
你是说我用的jquery？
是的，你使用的所有 Jquery CDN
仅限this...

标签： javascript android jquery css cordova

【解决方案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>

请检查代码。

主要是我用于 magnificPopup 的 CDN 发生了变化请在 magnificPopup CDN 之前添加 jquery

感谢希望对你有用

【讨论】：