Masonry Infinite Scroll et Pagination php

[AntiLoxy]

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.