Jquery Mobile Photoswipe не может обрабатывать внешние страницы

Я думаю, что нашел ошибку в 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. Итак, я пытаюсь разместить галерею на внешней странице. И это не сработало. Тумбы отображаются корректно, но при нажатии на одно из изображений оно загружается как обычная ссылка и галерея разрывается. Вот код:

Индекс.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>

моя галерея.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? Мне нужно реализовать динамически генерируемую галерею в моем приложении.


mobile jquery photoswipe
person esteban1972    schedule 06.10.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно загрузить все ваши 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>
person Shawn Taylor    schedule 20.05.2014