page transition not working

page transition not working

I'm having a fair amount of difficulty trying to figure out how to make a transition between two html pages..
I've put the link that isn't working in red.

index.html
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>Untitled Document</title>
  8. <link rel="stylesheet" href="css/style.css" />
  9. <script src="js/jquery-1.7.2.min.js"></script>
  10. <script>
  11. $(document).bind("mobileinit", function(){
  13.  $.mobile.loadingMessage = false;
  15. });
  16. </script>
  17. <script src="js/jquery.mobile-1.1.1.min.js"></script>
  18. <script>
  19. $('document').ready(function(){
  20. $("#topButton").click(function(){
  21. $('html, body').animate({scrollTop: 0}, 'slow');    
  22. });
  23. });
  24. </script>
  25. </head>

  27. <body>
  28. <div id="wrapper" data-role="page">
  29. <div id="topWrapper">
  30. <div id="top">
  31. <div class="logo"><img src="images/logo.jpg" alt="syntetik" title="syntetik" /></div>

  33. <p class="intro">We are a creative collective delivering digital work for advertisers, ad agencies and government.</p>

  35. <hr class="line" />
  37.             <a href="detail.html" data-transition="slide" rel="external"><img class="work_thumb" src="images/test.jpg" /><span class="caption"><h2>website</h2><h3>altripan</h3></span></a>
  38. </div>
  39. </div>
  40.     <div id="bottomWrapper">
  41.         <div id="bottom">
  42.     <a href="#"><div id="topButton"><img src="images/topButton.jpg" /><span class="text">top</span></div></a>
  43.             
  44.             <div id="mailus">
  45.             <span class="text">Email us</span> <a class="right" href="mailto:info@syntetik.be">info@syntetik.be</a>
  46.             </div>
  47.             
  48.             <hr class="line" />
  49.             <div id="callus"> 
  50.             <span class="text">Call us</span><a class="right" href="tel:+32486836401">0486 83 64 01</a> 
  51.             <a class="right secondline" href="tel:+32496821801">0496 82 18 01</a><br /><br /><br /><br />
  52.             </div> 
  54.              <hr class="line" />
  55.             <div id="findus">
  56.               <span class="text">Find Us</span> <p class="right">Meirbrug 1 bus 34</p><p class="right secondline">2000 Antwerp</p><br /><br /><br /><br />
  57.             </div>
  58.              <hr class="line" />
  59.              <div id="social">
  60.             <a class="fb" href="http://www.facebook.com/pages/Syntetik/161733833884576"><img src="images/fb_logo.jpg" alt="facebook" title="syntetik facebook" /></a>
  61.                 
  62.                 <a href="http://twitter.com/syntetik"><img src="images/twit_logo.jpg" alt="twitter" title="syntetik twitter" /></a>
  63.              </div>
  64.         </div>
  65.     </div>
  66. </div>
  67. </body>
  68. </html>

detail.html
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>Untitled Document</title>
  8. <link rel="stylesheet" href="css/style.css" />
  9. <script src="js/jquery-1.7.2.min.js"></script>
  10. <script src="js/easySlider1.7.js"></script>
  11. <script>
  12. $(document).bind("mobileinit", function(){
  14.  $.mobile.loadingMessage = false;
  16. });
  17. </script>
  18. <script src="js/jquery.mobile-1.1.1.min.js"></script>
  19. <script>
  20. $('document').ready(function(){
  21. $("#topButton").click(function(){
  22. $('html, body').animate({scrollTop: 0}, 'slow');    
  23. });
  24. $("#slideshow").easySlider({
  25. auto: true, 
  26. continuous: true,
  27. controlsShow: false
  28. });
  29. });
  30. </script>
  31. </head>

  33. <body>
  34. <div id="wrapper" data-role="page">
  35. <div id="topWrapper">
  36. <div id="top">
  37. <div class="logo"><img src="images/logo.jpg" alt="syntetik" title="syntetik" /></div>
  38.             <div>
  39.             <ul>
  40.             <li><img class="work_thumb" src="images/test.jpg" /></li>
  41. <li><img class="work_thumb" src="images/test2.jpg" /></li>
  42.             </ul>
  43.             </div>
  44.             <hr class="line" />
  45.             <h2>Altripan</h2>
  46.             <h3>Website</h3>
  47.             <p class="description">Donut oat cake cotton candy gingerbread biscuit chupa chups pie tootsie roll. Cotton candy dragée tiramisu gummi bears halvah. Chocolate bar icing bonbon liquorice oat cake cotton candy donut. Tart gummies lollipop lemon drops gummi bears dragée chocolate.</p><br />
  48.          
  49.             <p class="extern">Client: KPN Group - VVMA</p>
  50.             <p class="extern">Partners: Dreams & Creations, Yappa</p>
  51. </div>
  52. </div>
  53.     <div id="bottomWrapper">
  54.         <div id="bottom">
  55.     <a href="#"><div id="topButton"><img src="images/topButton.jpg" /><span class="text">top</span></div></a>
  56.             <br />
  57.             <a href="#"><div id="backButton"><img src="images/backButton.jpg" /><span class="text">back to work</span></div></a>
  58.             
  59.             <div id="mailus">
  60.             <span class="text">Email us</span> <a class="right" href="mailto:info@syntetik.be">info@syntetik.be</a>
  61.             </div>
  62.             
  63.             <hr class="line" />
  64.             <div id="callus"> 
  65.             <span class="text">Call us</span><a class="right" href="tel:+32486836401">0486 83 64 01</a> 
  66.             <a class="right secondline" href="tel:+32496821801">0496 82 18 01</a><br /><br /><br /><br />
  67.             </div> 
  69.              <hr class="line" />
  70.             <div id="findus">
  71.               <span class="text">Find Us</span> <p class="right">Meirbrug 1 bus 34</p><p class="right secondline">2000 Antwerp</p><br /><br /><br /><br />
  72.             </div>
  73.              <hr class="line" />
  74.              <div id="social">
  75.             <a class="fb" href="http://www.facebook.com/pages/Syntetik/161733833884576"><img src="images/fb_logo.jpg" alt="facebook" title="syntetik facebook" /></a>
  76.                 
  77.                 <a href="http://twitter.com/syntetik"><img src="images/twit_logo.jpg" alt="twitter" title="syntetik twitter" /></a>
  78.              </div>
  79.         </div>
  80.     </div>
  81. </div>

  83. </body>
  84. </html>

I've also tried the whole thing without the rel="external".
I've also tested the entire thing on a local server, a webserver and even iphone and android.

If been looking for a while now, since i'm pretty sure there's already a solution for this problem on the web, but i just can't seem to get my hands on it! 

Any help would by much appreciated..

Jonas