Javascript Photoswip-无图库视图-无导航按钮_Javascript_Html_Css_Photoswipe

Javascript Photoswip-无图库视图-无导航按钮

javascript html css

Javascript Photoswip-无图库视图-无导航按钮,javascript,html,css,photoswipe,Javascript,Html,Css,Photoswipe,我根据在线教程和Photosweep文档构建了这个。它在所有浏览器（Safari、FF、Chrome）中的预览效果相同。但有两个问题首先，pix是堆叠的，而不是像小册子那样插入到图库视图中第二个问题是没有导航按钮。否则，照片刷罚款我的代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <link href=

我根据在线教程和Photosweep文档构建了这个。

它在所有浏览器（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>


测试
（功能（窗口、Photosweep）{
document.addEventListener（'DOMContentLoaded'，function（）{
变量
选项={}，
instance=photoswip.attach（window.document.queryselectoral（“#库a”），选项）；
}，假）；
}（window，window.Code.photoswip））；
光擦除试验

我尝试过使用jquery版本，但也没有乐趣。还添加/替换了我在几个版本和在线教程中发现的不同css。没有什么。JS和CSS文件是从Photosweep网站下载的，并且已经放在我的服务器上的主目录下的JS和CSS目录下。我已经证实他们被叫来了

哪里出错了？

在修改脚本时，我在显示库时也遇到问题。不用编辑就可以尝试

照片滑动设置为显示图像的缩略图。当您点击图像时，它会打开“多媒体资料”视图。如果使用示例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>


这可能无法解决您的问题，但解释了JavaScript的工作原理：Usefulcat。这实际上很有用，谢谢：）最终我放弃了Photosweep，换了一个更轻、更干净的滑块。不过谢谢你的指点，它们很有帮助！