Question

我想我在Photoswipe中发现了一个错误，我需要一些帮助。以下代码是为使用Photoswipe的移动应用程序制作的页面。在单个html文件上，您有两个页面，并且一切正常：

<html> 
<head> 
  <meta charset="utf-8" />
  <title>Photoswipe test</title>  
  <meta name=viewport content="user-scalable=no, width=device-width" />
  <meta name="apple-mobile-web-app-capable" content="yes" />

  <link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
  <link rel="stylesheet" href="js/photoswipe/styles.css" />
  <link rel="stylesheet" href="js/photoswipe/photoswipe.css" />

  <script type="text/javascript" src="js/photoswipe/lib/klass.min.js"></script>
  <script src="jquery-1.7.2.js"></script>
  <script src="jquery.mobile-1.1.1.js"></script>
  <script type="text/javascript" src="js/photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>  

  <script type="text/javascript">
  (function(window, $, PhotoSwipe){
    $(document).ready(function(){
      var options = {};
    $("#Gallery a").photoSwipe(options);
    });
  }(window, window.jQuery, window.Code.PhotoSwipe));          
  </script>

</head> 

<body>

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

<div data-role="header" data-position="fixed">
<h1>My Gallery</h1>
</div>

<div data-role="content">
<p style="text-align:center;"><a href="#mygallerypage">Click to visit the gallery</a>    </p>
</div>

</div>


<div data-role="page" id="mygallerypage" data-add-back-btn="true" class="gallery-page">

<div data-role="header" data-position="fixed">
<h1>My Gallery</h1>
</div>

<div data-role="content">

<ul id="Gallery" class="gallery">
<li><a href="photos/1LY6TZAV.jpg" rel="external"><img src="photos/thumbs/1LY6TZAV.jpg" /></a></li>
<li><a href="photos/16D20982.jpg" rel="external"><img src="photos/thumbs/16D20982.jpg" /></a></li>
<li><a href="photos/5W1BTW3Y.jpg" rel="external"><img src="photos/thumbs/5W1BTW3Y.jpg" /></a></li>
</ul>

</div>  

</div> 

</body>
</html>

现在。我需要使用参数和JSON加载我的应用程序的图像。所以，我尝试将图库放在外部页面上。它没有用。拇指显示正确，但当您按下其中一个图像时，它将作为常规链接加载，并且图库会破坏appart。这是代码：

的index.html：

<html> 
<head> 
  <meta charset="utf-8" />
  <title>Photoswipe test</title>  
  <meta name=viewport content="user-scalable=no, width=device-width" />
  <meta name="apple-mobile-web-app-capable" content="yes" />

  <link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
    <link rel="stylesheet" href="js/photoswipe/styles.css" />
    <link rel="stylesheet" href="js/photoswipe/photoswipe.css" />

  <script type="text/javascript" src="js/photoswipe/lib/klass.min.js"></script>
  <script src="jquery-1.7.2.js"></script>
  <script src="jquery.mobile-1.1.1.js"></script>
  <script type="text/javascript" src="js/photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>  


  <script type="text/javascript">

        (function(window, $, PhotoSwipe){
            $(document).ready(function(){
                var options = {};
                $("#Gallery a").photoSwipe(options);
            });
        }(window, window.jQuery, window.Code.PhotoSwipe));          

  </script>


</head> 

<body>

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

    <div data-role="header" data-position="fixed">
    <h1>My Gallery</h1>
  </div>

  <div data-role="content">
    <p style="text-align:center;"><a href="mygallery.html">Click to visit the gallery</a></p>
  </div>

</div>

</body>
</html>

mygallery.html：

<html> 
<head> 
  <meta charset="utf-8" />
</head> 
<body> 

<div data-role="page" id="mygallerypage" data-add-back-btn="true" data-transition="slide" class="gallery-page">
    <div data-role="header" data-position="fixed">
    <h1>My Gallery</h1>
  </div>

    <div data-role="content">

    <ul id="Gallery" class="gallery">
        <li><a href="photos/1LY6TZAV.jpg" rel="external"><img src="photos/thumbs/1LY6TZAV.jpg" /></a></li>
        <li><a href="photos/16D20982.jpg" rel="external"><img src="photos/thumbs/16D20982.jpg" /></a></li>
        <li><a href="photos/5W1BTW3Y.jpg" rel="external"><img src="photos/thumbs/5W1BTW3Y.jpg" /></a></li>
    </ul>

    </div>  

</div> 

</body>
</html>

任何想法可能有什么问题或者它可能是Photoswipe的问题？我需要在我的应用上实现动态生成的图库。

Answer 1

您需要将所有CSS和JS文件和scritps加载到新的图库页面中。因为它们是相对链接，所以如果它已经改变，你必须更新它们的相对性。或者使用CDN或其他绝对链接选项。

  <link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
  <link rel="stylesheet" href="js/photoswipe/styles.css" />
  <link rel="stylesheet" href="js/photoswipe/photoswipe.css" />
  <script type="text/javascript" src="js/photoswipe/lib/klass.min.js"></script>
  <script src="jquery-1.7.2.js"></script>
  <script src="jquery.mobile-1.1.1.js"></script>
  <script type="text/javascript" src="js/photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>  
  <script type="text/javascript">
        (function(window, $, PhotoSwipe){
            $(document).ready(function(){
                var options = {};
                $("#Gallery a").photoSwipe(options);
            });
        }(window, window.jQuery, window.Code.PhotoSwipe));          
  </script>

Jquery Mobile Photoswipe无法处理外部页面

1 个答案: