Question

我是根据在线教程和Photoswipe文档构建的。 http://sfrunningtours.com/photoswipetest.html

它在所有浏览器（Safari，FF，Chrome）中预览相同。但是有两个问题。

首先，pix是堆叠的，而不是像小册子那样插入图库视图

第二个问题是没有导航按钮。否则照片会轻扫。

我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>

<script>
        (function(window, PhotoSwipe){
            document.addEventListener('DOMContentLoaded', function(){
                var
                    options = {},
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
            }, false);
        }(window, window.Code.PhotoSwipe));
</script>

</head>

<body>

<div data-role="page" id="Home">

    <div data-role="header">
        <h1>PhotoSwipe Test</h1>
    </div>

<div data-role="content" >      
    <ul id="Gallery" style="list-style:none">
        <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
        <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
        <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
        <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
        <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
        <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
    </ul>
</div>

</body>
</html>

我尝试过使用jquery版本，但也没有喜悦。还添加/替换了我在几个版本和在线教程中找到的不同css。没有。 JS和CSS文件是从Photoswipe站点下载的，并且已经放在我的服务器上的目录js和css下的main下。我已经证实他们正在被召唤。

我哪里出错了？

Answer 1

在修改脚本时，我也遇到了显示库的问题。不经编辑即可试用。

照片滑动设置为显示图像的缩略图。当您点按图片时，它应该会打开图库视图。如果使用示例CSS，请确保您的div具有正确的类属性，如示例html中所示。例如：

<div id="Gallery">
    <div class="gallery-list">
        <div class="gallery-item"><a href="[your image file]/></div>
        <div class="gallery-item"><a href="[your image file]/></div>
        <div class="gallery-item"><a href="[your image file]/></div>
    </div>
</div>

而不是使用列表

Photoswipe - 没有图库视图 - 没有导航按钮

1 个答案: