2

Photoswipe でバグを見つけたようです。助けが必要です。次のコードは、Photoswipe を使用するモバイル アプリケーション用に作成されたページです。1 つの html ファイルに 2 つのページがあり、すべて正常に動作します。

<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 を使用してアプリケーションのイメージをロードする必要があります。そのため、ギャラリーを外部ページに配置しようとしています。そして、それはうまくいきませんでした。親指は正しく表示されますが、画像の 1 つを押すと、通常のリンクとして読み込まれ、ギャラリーが壊れます。コードは次のとおりです。

インデックス.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 に問題がある可能性がありますか? アプリに動的に生成されたギャラリーを実装する必要があります。

4

1 に答える 1

0

すべての CSS および JS ファイルとスクリプトを新しいギャラリー ページにロードする必要があります。また、これらは相対リンクであるため、相対性が変更された場合は更新する必要があります。または、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>
于 2014-05-20T22:18:14.507 に答える