title: How to integrate photoswipe inside jquerymobile pages?
body: <p>I am trying to implement photoswipe inside my jquerymobile application.
  I am using jquerymobile &amp; Django to develop my application and now I want to setup a gallery on one my pages.
  Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.</p>
  
  <p>On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts)
  I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages.
  So I need to know how to setup the code for photoswipe before page load.</p>
  
  <p>The code below is from the itemPage level( I put the code from the photoswipe demo inside)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;PhotoSwipe&lt;/title&gt;
      &lt;meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" /&gt;
      &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  
      &lt;link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" /&gt;
      &lt;link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" /&gt;
      &lt;link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" /&gt;
  
      &lt;script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div data-role="page" id="Home"&gt;
  
      &lt;script type="text/javascript"&gt;
  
          (function(window, PhotoSwipe){
  
              document.addEventListener('DOMContentLoaded', function(){
  
                  var
                      options = {},
                      instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
  
              }, false);
  
  
          }(window, window.Code.PhotoSwipe));
  
      &lt;/script&gt;
  
  
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;PhotoSwipe&lt;/h1&gt;
      &lt;/div&gt;
  
  
      &lt;div data-role="content" &gt;  
  
          &lt;p&gt;These examples show PhotoSwipe integrated with jQuery Mobile:&lt;/p&gt;        
  
          &lt;ul data-role="listview" data-inset="true"&gt;
              &lt;li&gt;&lt;a href="#Gallery1"&gt;First Gallery&lt;/a&gt;&lt;/li&gt; 
  
          &lt;/ul&gt; 
  
          &lt;p&gt;PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:&lt;/p&gt;
  
          &lt;ul data-role="listview" data-inset="true"&gt;
              &lt;li&gt;&lt;a href="01-default.html" target="_blank"&gt;Code Computerlove&lt;/a&gt;&lt;/li&gt; 
          &lt;/ul&gt; 
  
      &lt;/div&gt;
  
      &lt;div data-role="footer"&gt;
          &lt;h4&gt;&amp;copy; 2011 Code Computerlove&lt;/h4&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;First Gallery&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;   
  
          &lt;ul class="gallery"&gt;
  
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/chichen1.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/002.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/003.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/004.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/005.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/006.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/007.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/008.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="{{ STATIC_URL }}images/009.jpg" rel="external"&gt;&lt;img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
      &lt;div data-role="footer"&gt;
          &lt;h4&gt;&amp;copy; 2011 Code Computerlove&lt;/h4&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I put the script to handle the gallery inside <code>&lt;div data-role="page" id="Home"&gt;</code>
  since If I put the code in the head is never executed for the ajax call.
  However when I executed the code above, the page doesn't show the last level(itempage never appears)
  I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <code>&lt;div data-role="page" id="Home"&gt;</code></p>
  
  <pre><code>$( document ).delegate("#Home", "pagebeforecreate", function() {
               alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
            });
  </code></pre>
  
  <p>but how I can call the photoswipe script, If I replaced the code from alert function with</p>
  
  <pre><code>(function(window, PhotoSwipe){
  
              document.addEventListener('DOMContentLoaded', function(){
  
                  var
                      options = {},
                      instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
  
              }, false);
  
  
          }(window, window.Code.PhotoSwipe));
  </code></pre>
  
  <p>it doesn't work? the page doesn't load
  Hope you can help me!</p>
  
  <p>Thanks</p>