Jquery Mobile Photoswipe can't handle external pages

Question

I think I found a bug in Photoswipe and I need some help. The following code is a page made for a mobile application that uses Photoswipe. On a single html file you have the two pages and all works fine:

<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>

Now. I need to load the images of my application using parameters and JSON. So, I try to place the gallery on an external page. And it didn't work. The thumbs are displayed correctly but when you press on one of the images it is loaded as an usual link and the gallery breaks appart. Here is the code:

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>

Any ideas what can be wrong Or it may be a problem with Photoswipe? I need to implement a dynamically generated gallery on my app.

score 0 · Answer 1 · answered May 20 '14 at 22:18

You need to load all your CSS and JS files and scritps into the new gallery page. And since they are relative links, you have to update their relativity if it has changed. Or use CDNs or other absolute link options.

  <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 can't handle external pages

1 Answers1