杂乱无章的弹出式画廊
杂乱无章的弹出式画廊
提问于 2015-12-23 08:31:48
我试图在我的网页上创建一个图片库，使用的是镁基弹出窗口，但我无法让图片显示在弹出窗口中，它只显示在一个单独的选项卡中。我怎样才能让它在画廊视图中显示，并允许循环浏览网页画廊中的所有图像？此外，如何更改正在显示的灯箱的大小和缩略图的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.modal-dialog {}
.thumbnail {margin-bottom:6px; height: 280px;}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
}
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
});
</script>
</head>
<body>
<div id="main" role="main">
<br />
<br />
<br />
<div class="parent-container">
<a href="path-to-image-1.jpg">Open popup 1</a>
<a href="path-to-image-2.jpg">Open popup 2</a>
<a href="path-to-image-3.jpg">Open popup 3</a>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-23 08:56:37
问题是你的HTML标记！
<a href="path-to-image-1.jpg">Open popup 1</a>这是行不通的。
<a class="test-popup-link" href="path-to-image-1.jpg">Open popup 2</a>但这会成功的。
检查Codepen
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34431522
复制相关文章
相似问题
腾讯云开发者
