Question

我目前正在尝试使用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>&copy; 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>&copy; 2011 PhotoSwipe</h4>
        </div>
    </div>
</body>
</html>

Answer 1

PhotoSwipe有一个modal选项：

var options = {
    modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();

这使得PhotoSwipe容器在设置为false时仅占用其父级的大小。

Answer 2

我不知道这样做的自动方式，我所做的是将.pswp div放在具有固定宽度和高度的容器div中，然后通过JS + CSS将容器div放在中心位置屏幕。使用photoswipe文档中描述的基本设置，并添加了pswp div，然后：

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。

这应该可以为您自己的页面提供所需的效果和良好的起点，但请注意，有必要添加您自己的背景图层以触发“关闭其他地方的点击”。以及在弹出窗口打开/关闭事件期间必须修复的其他细节......

Answer 3

您可以将 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>

Answer 4

我尝试了各种解决方案以使其正常工作，包括 inline gallery 选项 (demo)。

但是我不能完全按照我的意愿让它工作，因为我需要一个特定的画廊来显示而不先显示缩略图。

我最后所做的是得到一个基本的 PhotoSwipe 页面，它可以在页面加载时自动将图像加载到全屏，例如使用 MVC URL：

/Gallery/Index/1

然后只需将此链接嵌入到 div using object 中：

<div id="mygallery1">
    <object data="/Gallery/Index1">
        Error: Embedded data could not be displayed.
    </object>
</div>

这让我可以将任意数量的画廊放置在我想要的任何位置，而不会相互干扰。

请注意，虽然这似乎不适用于移动浏览器，但对于这么小的屏幕来说这很好，但由于屏幕空间有限，我还是想要一个后备选项以覆盖整个页面。

配置PhotoSwipe不使用整个窗口？

4 个答案: