我目前正在尝试使用构建移动图片库照片滑动 http://photoswipe.com/。
我已经能够让它工作了，但有一个小问题。当我
单击照片缩略图，实际照片总是占据整个
视口。当您在移动设备上查看图库时，这是可以的。
但是，如果您的视口是计算机屏幕并且图像不是
高分辨率的照片可能会非常模糊。我宁愿限制照片
在计算机上查看时，宽度可能为 300 到 400 像素。有没有
有办法在 PhotoSwipe 中做到这一点吗？我阅读了文档但无法
相当弄清楚。我在下面附上了我的代码。
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li><a href="#Gallery1">First Gallery</a></li>
<li><a href="#Gallery2">Second Gallery</a></li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><a href="images/01.jpg" rel="external"><img src="images/01-thumb.jpg" alt="Image 1" /></a></div>
<div class="gallery-item"><a href="images/02.jpg" rel="external"><img src="images/02-thumb.jpg" alt="Image 2" /></a></div>
<div class="gallery-item"><a href="images/03.jpg" rel="external"><img src="images/03-thumb.jpg" alt="Image 3" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/04.jpg" rel="external"><img src="images/04-thumb.jpg" alt="Image 4" /></a></div>
<div class="gallery-item"><a href="images/05.jpg" rel="external"><img src="images/05-thumb.jpg" alt="Image 5" /></a></div>
<div class="gallery-item"><a href="images/06.jpg" rel="external"><img src="images/06-thumb.jpg" alt="Image 6" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/07.jpg" rel="external"><img src="images/07-thumb.jpg" alt="Image 7" /></a></div>
<div class="gallery-item"><a href="images/08.jpg" rel="external"><img src="images/08-thumb.jpg" alt="Image 8" /></a></div>
<div class="gallery-item"><a href="images/09.jpg" rel="external"><img src="images/09-thumb.jpg" alt="Image 9" /></a></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe 有一个modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
这使得 PhotoSwipe 容器在设置为时仅采用其父容器的大小false.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
