Javascript 是否将Photosweep配置为不使用整个窗口？_Javascript_Jquery_Css_Jquery Mobile_Photoswipe

Javascript 是否将Photosweep配置为不使用整个窗口？

javascript jquery css jquery-mobile

Javascript 是否将Photosweep配置为不使用整个窗口？,javascript,jquery,css,jquery-mobile,photoswipe,Javascript,Jquery,Css,Jquery Mobile,Photoswipe,我目前正在尝试使用创建一个移动图像库。我已经能够让它工作了，但是有一个小问题。当我单击照片缩略图，实际照片始终占据整个屏幕视口。当您在移动设备上查看多媒体资料时，这是正常的。但是如果您的视口是计算机屏幕，而图像不是在高分辨率的情况下，照片可能会非常模糊。我宁愿限制这张照片在计算机上观看时，宽度可能为300到400像素。有在Photosweep中执行此操作的方法？我看了文档，但看不懂我完全明白了。我在下面附上了我的密码谢谢 <!DOCTYPE html> <ht

我目前正在尝试使用创建一个移动图像库。我已经能够让它工作了，但是有一个小问题。当我单击照片缩略图，实际照片始终占据整个屏幕视口。当您在移动设备上查看多媒体资料时，这是正常的。但是如果您的视口是计算机屏幕，而图像不是在高分辨率的情况下，照片可能会非常模糊。我宁愿限制这张照片在计算机上观看时，宽度可能为300到400像素。有在Photosweep中执行此操作的方法？我看了文档，但看不懂我完全明白了。我在下面附上了我的密码

谢谢

<!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>


Photosweep-jQuery移动版
第二排：后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
可见性：隐藏；
}
部门画廊-项目{
浮动：左；
宽度：33.333%；
}
第a项{
显示：块；
保证金：5px；
边框：1px实心#3c；
}
部门画廊-项目img{
显示：块；
宽度：100%；
高度：自动；
}
#Gallery1.ui内容，#Gallery2.ui内容{
溢出：隐藏；
}
$（文档）.ready（函数（）{
$（'div.gallery-page'）.live（'pageshow'，函数（e）{
//使用当前页面的照片重新初始化
$（'div.gallery a'，e.target）.photoswip（）；
返回true；
});
});
擦照片
这些示例显示了与jQuery Mobile集成的Photoswip:




&抄袭；2011年Photosweep
第一画廊
&抄袭；2011年Photosweep

我不知道有什么自动方法可以做到这一点，我所做的是将.pswp div放入一个具有固定宽度和高度的容器div中，然后通过JS+CSS将该容器div定位在屏幕中央。在已添加pswp div的情况下，使用Photosweep文档中所述的基本设置，然后：

HTML

你可以找到一个有效的例子

这将为您提供所需的效果，并为您自己的页面提供一个良好的起点，但请记住，有必要添加您自己的背景层，以触发“单击其他地方关闭”以及在弹出窗口的打开/关闭事件期间必须修复的其他细节…

您可以放置Photoswip标记（类为

pswp

的根元素）使用

position:relative

编辑photosweep.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>


容器中的光擦除
#霉菌容器{
位置：相对位置；
/*其他容器样式*/
}
.pswp{
位置：绝对！重要；
}

Photosweep有一个

模式

选项：

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

这使得Photosweep容器在设置为

false

时仅采用其父容器的大小。我尝试了各种解决方案，包括选项（）

然而，我不能完全让它像我想要的那样工作，因为我需要一个特定的图库来显示而不首先显示缩略图

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

```
/Gallery/Index/1
```

然后只需将此链接嵌入

div

：


错误：无法显示嵌入的数据。

这让我可以在任何位置放置任意数量的画廊，而不受它们之间的干扰

请注意，尽管这似乎不适用于移动浏览器，但对于如此小的屏幕来说，这很好。由于屏幕空间有限，我希望在整个页面上都有一个后备选项，以覆盖方式呈现

// 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)
    });
}

<!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>

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

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