title: Swipe on a image
body: <p>I have this code to swipe between the pages, my content is a simple image.</p>
  
  <p>The problem is that i cant swipe over the image, only in a specify area between header and image.</p>
  
  <p>But i want swipe to the next page over the image too.</p>
  
  <p>how can i solved it? need help</p>
  
  <p>My Code HTML5:</p>
  
  <pre><code>&lt;div data-role="page" id="p1"&gt;
      &lt;div data-role="header" data-theme="a" data-position="fixed" data-id="footer"&gt;                      
    &lt;h1&gt;2013&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;img src="imagens/HomePrincipal.jpg"/&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed" data-id="footer"&gt;                  
     &lt;h1&gt;Footer&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div data-role="page" id="p2"&gt;
      &lt;div data-role="header" data-position="fixed" data-id="footer"&gt;                     
    &lt;a href="#p1" data-icon="home" data-iconpos="notext"&gt;Home&lt;/a&gt;
          &lt;h1&gt;2013&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;img src="imagens/PrototipoAlternativo2.jpg"/&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed" data-id="footer"&gt;              
       &lt;h1&gt;Footer&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).on('swipeleft', '[data-role="page"]', function(event){    
      if(event.handled !== true) // This will prevent event triggering more then once
      {    
          var nextpage = $(this).next('[data-role="page"]');
          // swipe using id of next page if exists
          if (nextpage.length &gt; 0) {
              $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
          }
          event.handled = true;
      }
      return false;         
  });
  
  $(document).on('swiperight', '[data-role="page"]', function(event){   
      if(event.handled !== true) // This will prevent event triggering more then once
      {      
          var prevpage = $(this).prev('[data-role="page"]');
          if (prevpage.length &gt; 0) {
              $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
          }
          event.handled = true;
      }
      return false;            
  });
  </code></pre>
  
  <p>CSS master.css:</p>
  
  <pre><code>.gridContainer {
      width: 88.2%;
      max-width: 1232px;
      padding-left: 0.9%;
      padding-right: 0.9%;
      margin: auto;
  }
  #test img{position:absolute;z-index:-1}
  </code></pre>
  
  <p>boilerplate.css:</p>
  
  <pre><code>img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  </code></pre>
  
  <p>and i use jquery.mobile.1.2.0.min.css</p>