0

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

它在所有浏览器（Safari、FF、Chrome）上的预览都是一样的。但是有2个问题。

首先，像素是堆叠的，而不是像小册子那样插入到画廊视图中

第二个问题是没有导航按钮。否则照片滑动罚款。

我的代码：

<!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 站点下载的，并已放在我的服务器上 main 下的 js 和 css 目录中。我已经确认他们正在被调用。

我哪里做错了？

4

1 回答 1

0

在修改脚本时，我在显示画廊时也遇到了问题。无需您的编辑即可尝试。

Photo Swipe 设置为显示图像的缩略图。当您点击图像时，它应该会打开图库视图。如果您使用示例 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>

而不是使用列表

于 2014-07-25T22:36:44.377 回答