viewer-- A simple jQuery image viewing plugin.
Viewer v0.5.1
Viewer.js – 强大的JS/jQuery图片查看器
根据以上资料自己做了个demo。
由于工作需要，要在bootstrap的modal层里应用viewer，遇到的问题是：
在modal层里应用viewer无法居中，如图：
ps:这个modal层相对较长.
ps:不显示在modal层中时是正常的，如下图：
请问，该如何设置使预览放大的照片在modal内居中？
代码：jsfiddle 点击查看（注：viewer的效果没有，在线调试中引入的文件不起作用）
1
1855<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>viewer.js图片查看器插件</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<link rel="stylesheet" href="plugin/viewer/css/viewer.css">
</head>
<body>
<span id="btn" class="btn btn-default" data-title="add"><i class="fa fa-minus-square"></i> 弹框</span>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div>
<div>
<button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 id="myModalLabel"><i class="fa fa-pencil-square-o"></i> 图片上传</h4>
</div>
<div>
<ul id="docs-pictures">
<li>
<div> <img data-original="img/hgtrh.jpg" src="img/thumbnails/hgtrh.jpg"></div>
</li>
<li><img data-original="img/imagfrefrewfes (3).jpg" src="img/thumbnails/imagfrefrewfes (3).jpg"></li>
<li><img data-original="img/20160918105709.jpg" src="img/thumbnails/20160918105709.jpg"></li>
<li><img data-original="img/fewfef.jpg" src="img/thumbnails/fewfef.jpg"></li>
<li><img data-original="img/apic14052.jpg" src="img/thumbnails/apic14052.jpg"></li>
<li><img data-original="img/images (2).jpg" src="img/thumbnails/images (2).jpg"></li>
<li><img data-original="img/vfegvreg.jpg" src="img/thumbnails/vfegvreg.jpg"></li>
<li><img data-original="img/images.jpg" src="img/thumbnails/images.jpg"></li>
<li><img data-original="img/20160918132119.jpg" src="img/thumbnails/20160918132119.jpg"></li>
</ul>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class='fa fa-times'></i> 关闭</button>
</div>
</div>
</div>
</div>
<ul id="pictures">
<li>
<div> <img data-original="img/hgtrh.jpg" src="img/thumbnails/hgtrh.jpg"></div>
</li>
<li><img data-original="img/imagfrefrewfes (3).jpg" src="img/thumbnails/imagfrefrewfes (3).jpg"></li>
<li><img data-original="img/20160918105709.jpg" src="img/thumbnails/20160918105709.jpg"></li>
<li><img data-original="img/fewfef.jpg" src="img/thumbnails/fewfef.jpg"></li>
<li><img data-original="img/apic14052.jpg" src="img/thumbnails/apic14052.jpg"></li>
<li><img data-original="img/images (2).jpg" src="img/thumbnails/images (2).jpg"></li>
<li><img data-original="img/vfegvreg.jpg" src="img/thumbnails/vfegvreg.jpg"></li>
<li><img data-original="img/images.jpg" src="img/thumbnails/images.jpg"></li>
<li><img data-original="img/20160918132119.jpg" src="img/thumbnails/20160918132119.jpg"></li>
</ul>
<script type="text/javascript" src='js/jquery-2.0.2.min.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugin/viewer/js/viewer.js"></script>
<script>
$('#docs-pictures,#pictures').viewer();
$('body').on('click', '#btn', function () {
$('#modal').modal('show');
});
</script>
</body>
</html>ps:页面效果不好看，请自行忽略
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
直接在$('#modal').viewer();
而不是用图片的id : $('#docs-pictures').viewer();