title: Integrating JQuery into php file
body: <p>I am trying to tweak a website so users will be able to swipe through the photo galleries on their mobile devices. I tried doing this by using JQuery. The website was not written by me, so I can't really explain the choices the previous programmer made regarding their code. </p>
  
  <p>Currently, users can change pictures by clicking (tapping) on the current picture. The code for this is found in a php file called home.php. This is it:</p>
  
  <pre><code>&lt;?php 
  ...
  $main_content .= "\n        &lt;div class='main_image'&gt;
          &lt;a href='$next_slideURL' style='display:block'&gt;
              &lt;img src='$root/$item_path/$slideFile' alt='$slideCaption from $projectTitle\n [xxxxxxxxxxxxx]' style='max-width:832px; max-height:500px' title='$projectTitle: $slideCaption. \nclick for next slide ($next_slideCaption). '&gt;&lt;/a&gt;
      &lt;/div&gt;\n";
  ...
  ?&gt;
  </code></pre>
  
  <p>To add swiping capabilities, I added the following code right after the one above:</p>
  
  <pre><code>echo "&lt;script type='text/javascript'&gt;";
      echo "(function(){
          $(\"div.main_image\").on(\"swipeleft\", swipeleftHandler);
          $(\"div.main_image\").on(\"swiperight\", swiperightHandler);
  
          function swipeleftHandler(event){
              $.mobile.changePage(\"$next_slideURL\", {transition: \"slideleft\", changeHash: false});
          }
  
          function swiperightHandler(event){
              $.mobile.changePage(\"$previous_slideURL\", {transition: \"slideright\", changeHash: false});
          }
      });";
      echo "&lt;/script&gt;";
  </code></pre>
  
  <p>While I'm not sure exactly why this isn't working, I have a few possible reasons (which might all be true unfortunately).</p>
  
  <p>1) Since the div class='main_image' is done as a variable declaration, the JQuery line "div.main_image" doesn't have a reference (i.e. it doesn't know what main_image is). I'm not sure why the div is created as a variable declaration ($main_content keeps being added on throughout the php file, and in the end it's echoed along with a bunch of other variables). </p>
  
  <p>2) I need to include the following code for JQuery but I have it in the wrong place:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>right now I have it in the header section of index.html file. Is this wrong?</p>
  
  <p>3) I've never used JQuery before, so any number of things might be wrong about the short script I wrote. </p>
  
  <p>Sorry about the long post, I'm not sure how to explain this in a simpler way. </p>
  
  <p>I'd appreciate it if anyone could help me either with this approach, or propose a different one. </p>
  
  <p>Cheers!</p>