[AJAX] Masonry Infinite Scroll et Pagination php

Bonjour, alors voilà je vous explique mon problème.
J'ai une galerie d'image qui fonctionne avec masonry et infinite scroll de Paul Irish, je récupère les images à partir d'une base mysql.
Voilà la structure de mes pages :

index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<div id="content" class="transitions-enabled infinite-scroll clearfix">
<?php
 
$curseur = NULL;
mysql_connect("localhost", "root", "password") or die("cannot connect");
mysql_select_db("db")or die("cannot select DB");
 
$sql=mysql_query("SELECT * FROM rtxposts ORDER BY id DESC LIMIT 11");
while($data=mysql_fetch_assoc($sql))
{
$curseur = htmlspecialchars($data['id'], ENT_QUOTES);
?>
<div id="globalcadre">............</div>
<?php
}
?>
 
</div>  <!-- clearfix -->
</div>  <!-- loading -->
 
<nav id="page-nav">
  <a href="2.php?start=<?php echo htmlspecialchars($curseur, ENT_QUOTES); ?>"></a>
</nav>
 
<script>
  $(document).ready(function() {
 
    var $container = $('#content');
 
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '#globalcadre',columnWidth: 0
      });
    });
 
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '#globalcadre',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
 
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );  
 
  });
</script>

2.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?php
 
mysql_connect("localhost", "root", "password") or die("cannot connect");
mysql_select_db("db")or die("cannot select DB");
 
$sql=mysql_query("SELECT * FROM rtxposts WHERE id < " . mysql_real_escape_string($_GET['start']) . " ORDER BY id DESC LIMIT 11");
while($data=mysql_fetch_assoc($sql))
{
$curseur = htmlspecialchars($data['id'], ENT_QUOTES);
?>
<div id="globalcadre">
 
</div>
<?php
}
?>
 
<nav id="page-nav">
  <a href="2.php?start=<?php echo htmlspecialchars($curseur, ENT_QUOTES); ?>"></a>
</nav>

Mon principal soucis c'est que la page 2.php est chargé une seule et unique fois par infinite scroll, alors que je voudrais un effet récursif de façon à avoir toutes mes images chargé par paquets de 11.
J'arrive à obtenir l'effet voulu en créant une "chaine" 2.php, 3.php, 4php etc... en adaptant mes requêtes, mais dans ce cas là l'argument $_GET['start']) reste toujours le même (celui envoyé par l'index) il ne se mets jamais à jour.

Au final c'est un problème assez compliqué, et je ne connais pas assez javascript pour pouvoir adapter une solution possible avec ce langage.

Merci de votre aide.