jquery 弹出窗口中可浏览图片

发布时间:2019-12-03编辑:脚本学堂
分享一个jquery 弹出窗口中浏览图片文件的特效代码,点击页面中图片,弹出可视化窗口,在其中浏览大图,效果不错,值得学习参考。

完整代码(弹出窗口):
 

复制代码 代码示例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出灯箱窗口浏览图片 - www.jb200.com</title>
<link rel="stylesheet" href="/phtml/jqtexiao/3/css/plcxue.css">
<script type="text/javascript" src="/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/phtml/jqtexiao/3/js/plcxue.min.js"></script>
<style>img{border:0px}</style>
</head>
<body>
<h2>弹出窗口浏览图片</h2>
<div><a href="/a/bjac/ppdss7ux.htm">原文</a>
请点击下列图片
</div>
<div class="dengxaing-plcxue-com">

<a title="2013-8-21" href="/phtml/jqtexiao/3/images/plcxue-com-2013-8-21_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-8-21_s.jpg"></a>

<a title="2013-9-13" href="/phtml/jqtexiao/3/images/plcxue-com-2013-9-13_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-9-13_s.jpg"></a>

<a title="2013-9-15" href="/phtml/jqtexiao/3/images/plcxue-com-2013-9-15_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-9-15_s.jpg"></a>

<a title="2013-9-16" href="/phtml/jqtexiao/3/images/plcxue-com-2013-9-16_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-9-16_s.jpg"></a>

<a title="2013-9-17" href="/phtml/jqtexiao/3/images/plcxue-com-2013-9-17_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-9-17_s.jpg"></a>

<a title="2013-9-23" href="/phtml/jqtexiao/3/images/plcxue-com-2013-9-23_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-9-23_s.jpg"></a>

<a title="2013-10-2" href="/phtml/jqtexiao/3/images/plcxue-com-2013-10-2_w.jpg">
<img width="133" height="75" src="/phtml/jqtexiao/3/images/plcxue-com-2013-10-2_s.jpg"></a>
</div>

<script type="text/jscript">
$(document).ready(function() {
$('.dengxaing-ke' + 'leyi-com').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by plcxue</small>';
}
}
});
});
</script>
</body>
</html>