将 PhotoSwipe 配置为不使用整个窗口？
Posted
技术标签:
【中文标题】将 PhotoSwipe 配置为不使用整个窗口？【英文标题】：Configure PhotoSwipe to Not Use Entire Window? 【发布时间】：2014-12-18 05:27:12 【问题描述】：我目前正在尝试使用PhotoSwipe 构建移动图片库。 我已经能够让它工作，但有一个小问题。当我 点击照片缩略图，实际照片总是占据整个 视口。当您在移动设备上查看图库时，这是可以的。 但是，如果您的视口是计算机屏幕并且图像不是 高分辨率一张，照片可能很模糊。我宁愿限制照片 在计算机上查看时，宽度可能为 300 到 400 像素。有没有 一种在 PhotoSwipe 中执行此操作的方法？我阅读了文档，但不能 很清楚。我在下面附上了我的代码。
谢谢。
<!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" /></a></div>
<div class="gallery-item"><a href="images/02.jpg" rel="external"><img src="images/02-thumb.jpg" /></a></div>
<div class="gallery-item"><a href="images/03.jpg" rel="external"><img src="images/03-thumb.jpg" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/04.jpg" rel="external"><img src="images/04-thumb.jpg" /></a></div>
<div class="gallery-item"><a href="images/05.jpg" rel="external"><img src="images/05-thumb.jpg" /></a></div>
<div class="gallery-item"><a href="images/06.jpg" rel="external"><img src="images/06-thumb.jpg" /></a></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><a href="images/07.jpg" rel="external"><img src="images/07-thumb.jpg" /></a></div>
<div class="gallery-item"><a href="images/08.jpg" rel="external"><img src="images/08-thumb.jpg" /></a></div>
<div class="gallery-item"><a href="images/09.jpg" rel="external"><img src="images/09-thumb.jpg" /></a></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：PhotoSwipe 有一个modal 选项：
var options =
modal: false
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
这使得 PhotoSwipe 容器在设置为 false 时仅采用其父容器的大小。
【讨论】：
【参考方案2】：您可以将 Photoswipe 标记（具有 pswp 类的根元素）放到任何带有 position: relative 的容器中并编辑 photoswipe.css 或添加到您的样式表中，例如这个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer
position: relative;
/* other container styles */
.pswp
position: absolute!important;
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
【讨论】：
【参考方案3】：我不知道自动执行此操作的方法，我所做的是将 .pswp div 放在具有固定宽度和高度的容器 div 中，然后通过 JS + CSS 将该容器 div 定位在中心屏幕。 使用已添加 pswp div 的 photoswipe 文档中所述的基本设置，然后：
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
.pswp
position: relative !important;
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe()
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css(
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
);
您可以找到一个工作示例here at CodePen。
这应该为您自己的页面提供所需的效果和一个良好的起点，但请记住，有必要添加您自己的背景层来触发“在其他地方单击时关闭”以及您需要的其他详细信息必须在弹出窗口的打开/关闭事件期间修复...
【讨论】：
【参考方案4】：我尝试了各种解决方案以使其正常工作，包括 inline gallery 选项 (demo)。
但是我不能完全按照我的意愿工作，因为我需要在不先显示缩略图的情况下显示特定的画廊。
我最后做的是让一个基本的 PhotoSwipe 页面正常工作，它会在页面加载时自动将图像加载到全屏，例如使用 MVC URL：
/Gallery/Index/1
然后简单地将这个链接嵌入到divusing object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
这使我可以将任意数量的画廊放置在我想要的任何位置，而不会相互干扰。
请注意，尽管这似乎不适用于移动浏览器，但对于较小的屏幕来说这很好，由于屏幕空间有限，我还是希望有一个后备选项以覆盖整个页面。
【讨论】：
以上是关于将 PhotoSwipe 配置为不使用整个窗口？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile 1.4.2 + Photoswipe 1.0.11
JSPM + TypeScript + PhotoSwipe：如何成功导入和使用库？
PhotoSwipe：编辑 parseThumbnailElements 函数以解析附加标记元素