Mobile Gallery (photoswipe) needs refresh to work

Mobile Gallery (photoswipe) needs refresh to work

After reading thru the questions relating to this issue, I would ask for an example of what I would like to do. Since I am a mere (L)user of jQuery, and not a creator, I have been struggling. I have ben trying to implement Photoswipe using the excellent tut provided by another person smarter than I. 

The Issue:
mobile gallery(photoswipe) and drop down menu only work after page refresh. Drop down menu seemed to work fine before.

The linked css and script:
(line 1-3 deals with the drop down nav, made by a much smarter person than I!)

  1. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  2. <script type="text/javascript" src="js/responsivemobilemenu.js"></script>

  3. <link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
  4. <link href="photoswipe.css" type="text/css" rel="stylesheet" />
  5.   
  6. <script type="text/javascript" src="klass.min.js"></script>
  7. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
  8. <script type="text/javascript" src="code.photoswipe.jquery-3.0.4.min.js"></script>
I hope I have placed these in the right order.

(At one point I tried linking a different css, due to some overriding. I replaced  jquery.mobile-1.0rc2.min.css   with jquery.mobile-1.4.1.min.css. That didn't appear to change much except render the photoswipe inoperative. I am sure my ignorance is painfully obvious with this fiddling about)


This is the script that follows, the one that I have been haphazardly mucking with:
(this script I have placed in the head)
  1. <script type="text/javascript">
  2.   
  3.  (function(window, $, PhotoSwipe)
  4.  {
  5.   $(document).ready(function()
  6.   {
  7.    $("#gallery a").photoSwipe(
  8.    {
  9.     enableMouseWheel: false,
  10.     enableKeyboard: false
  11.    });
  12.   });
  13.  }(window, window.jQuery, window.Code.PhotoSwipe));
  14. </script>
I have read that causing the page to refresh will alleviate this problem with the ajax. So I had tried:

  1.  (function(window, $, PhotoSwipe)
  2.  {
  3.   $( document ).on( "pageinit", function()
  4.   {
  5.    $("#gallery a").photoSwipe(
  6.    {
  7.     enableMouseWheel: false,
  8.     enableKeyboard: false
  9.    });
  10.   });
  11.  }(window, window.jQuery, window.Code.PhotoSwipe));
  12. </script>
The pageinit did not cause a refresh that I was able to see.

I tried changing document to gallery:
  1. $('#gallery').ready(function()
  2.   {
  3.    $("#gallery a").photoSwipe(
That did not work.

I have seen rel="external" mentioned. I have had that in with the photo links from the start: 
  1. <div id="gallery">
  2. <a href="big1.jpg" rel="external"><img alt="wow" src="small1.jpg"></a>
  3. </div>



The Request:

Can someone both smarter and more experienced (or just one of those) please set an example that will cause the gallery script to load fresh with every page, and not just the mobile home page? I think I may be close with the pageinit approach, but I don't think I have it quite right.

Thank you for your time.