我在我的phonegap应用程序中使用放大弹出窗口
。
这就是我的使用方式
<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');
}
}
});
});
当我在 Android 手机上运行此程序并单击图像时,图像只是在浏览器中打开,而不是按照图库打开。
我做错了什么?
最佳答案
$(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
谢谢希望对你有用
关于javascript - 单击图像上的放大弹出窗口在浏览器中打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43803475/