本文介绍了将PhotoSwipe配置为不使用整个窗口?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在尝试使用 PhotoSwipe 构建移动图片库.我已经能够使它工作,但是有一个小问题.当我单击照片缩略图,实际照片将始终占据整个照片视口.在移动设备上查看图库时可以.但是,如果您的视口是计算机屏幕,而图像不是高分辨率之一,照片可能会非常模糊.我宁愿限制照片在计算机上查看时,其宽度可能在300到400像素之间.在那儿一种在PhotoSwipe中执行此操作的方法?我阅读了文档,但无法弄清楚了.我已经在下面附上了我的代码.

I'm currently trying to build a mobile image gallery using PhotoSwipe.I've been able to get it working but there's one small problem. When Iclick on a photo thumbnail, the actual photo always takes up the entireviewport. This is OK when you're viewing the gallery on a mobile device.But if your viewport is a computer screen and the image isn't ahigh-res one, the photo can be very blurry. I'd rather limit the phototo a width of maybe 300 to 400 pixels when viewed on a computer. Is therea way to do this in PhotoSwipe? I read the documentation but couldn'tquite figure it out. I've enclosed my code below.

谢谢.

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

推荐答案

您可以将 Photoswipe 标记(类别为pswp的根元素)放置到具有position: relative的任何容器中,然后编辑 photoswipe.css 或在样式表中添加如下内容:

You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:

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

这篇关于将PhotoSwipe配置为不使用整个窗口?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 20:20