Jquery Mobile Photosweep can'；无法处理外部页面_Jquery_Mobile_Photoswipe

Jquery Mobile Photosweep can'；无法处理外部页面

jquery mobile

Jquery Mobile Photosweep can'；无法处理外部页面,jquery,mobile,photoswipe,Jquery,Mobile,Photoswipe,我想我在Photosweep中发现了一个bug，我需要一些帮助。以下代码是为使用Photosweep的移动应用程序制作的页面。在一个html文件中，您有两个页面，所有页面都可以正常工作： <html> <head> <meta charset="utf-8" /> <title>Photoswipe test</title> <meta name=viewport content="user-scalable=

我想我在Photosweep中发现了一个bug，我需要一些帮助。以下代码是为使用Photosweep的移动应用程序制作的页面。在一个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>


光擦除试验
（功能（窗口，$，Photosweep）{
$（文档）.ready（函数（）{
var选项={}；
$（#图库a”）。Photoswip（可选）；
});
}（window，window.jQuery，window.Code.photoswip））；
我的画廊

我的画廊

现在。我需要使用参数和JSON加载应用程序的图像。因此，我尝试将图库放在外部页面上。但它不起作用。拇指显示正确，但当您按下其中一幅图像时，它会作为常规链接加载，多媒体资料会中断显示。代码如下：

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>


光擦除试验
（功能（窗口，$，Photosweep）{
$（文档）.ready（函数（）{
var选项={}；
$（#图库a”）。Photoswip（可选）；
});
}（window，window.jQuery，window.Code.photoswip））；
我的画廊

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>


我的画廊

你知道Photosweep有什么问题吗？我需要在我的应用程序上实现一个动态生成的图库。

您需要将所有CSS和JS文件以及Scritp加载到新的图库页面。由于它们是相对链接，如果它们的相对性发生了变化，则必须更新它们的相对性。或者使用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>


（功能（窗口，$，Photosweep）{
$（文档）.ready（函数（）{
var选项={}；
$（#图库a”）。Photoswip（可选）；
});
}（window，window.jQuery，window.Code.photoswip））；

您需要将所有CSS和JS文件以及Scritp加载到新的gallery页面中。由于它们是相对链接，如果它们的相对性发生了变化，则必须更新它们的相对性。或者使用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>


（功能（窗口，$，Photosweep）{
$（文档）.ready（函数（）{
var选项={}；
$（#图库a”）。Photoswip（可选）；
});
}（window，window.jQuery，window.Code.photoswip））；