Infinite Scroll JQuery / PHP (Loading page issue )

Question

How can i load pages dynamically in case of an infinite Scroll.

The issue is that i have to manually create the php files. The Script searches for 2.php and then 3.php and then 4.php so on... I don't want to create these pages manually , i want it to be automatic ? :)

Some how i feel i have to create some type of loop to get the new images. Currently my code is as

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <title>Adi</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Adi</title>

<link rel="stylesheet" type="text/css" href="style.css" />


<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script src="modernizr-transitions.js"></script>
</head>

<body>
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<?php
// Make a MySQL Connection
mysql_connect("localhost", "ID", "Pass") or die(mysql_error());
mysql_select_db("DB") or die(mysql_error());

// Retrieve all the data from the "test " table
$result = mysql_query("SELECT * FROM test limit 10")
or die(mysql_error());  

// store the records of the "TABLENAME" table into $row array and loop through
while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {

// Print out the contents of the entry 

//echo "details: ".$row['id'];
echo '<div class="box">';
echo "<img src=\"images/".$row['image']."\" alt=\"name\" />";
echo '</div>';
}
?>
</div>
<p>Hi</p>
<p>&nbsp;</p>

<nav id="page-nav">
  <a href="2.php"></a>
</nav>

<script >
  $(function(){
    var $container = $('#container');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 60
      });
    });

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // 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>
</body>
</html>

Page 2.php

<?php
    // Make a MySQL Connection
    mysql_connect("localhost", "ID", "Pass") or die(mysql_error());
    mysql_select_db("DB") or die(mysql_error());

    // Retrieve all the data from the "test " table
    $result = mysql_query("SELECT * FROM test limit 5")
    or die(mysql_error());  

    // store the records of the "TABLENAME" table into $row array and loop through
    while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {

    // Print out the contents of the entry 

    //echo "details: ".$row['id'];
    echo '<div class="box">';
    echo "<img src=\"images/".$row['image']."\" alt=\"name\" />";
    echo '</div>';
    }
    ?>

Also you can use the GET part of the URL to decide which page they're on.. Append "?page=3" to the URL, and in PHP, you can access that value using $_GET['page']. — DanRedux, Apr 22 '12 at 05:15
@DanRedux - I don't want to create the php pages.Is it possible that after the initial 20 pictures next 5 pictures appear... After the scroll has reached the end then again next 5 pictures appear. And so on... I don't want to get it page wise ( Coz i will have to create those pages first , I wanted that out of 1000 pictures initial 20 are visible when the scroll reaches the bottom then next 5 are shown , then again next 5 and so on.... ) — Yahoo, Apr 22 '12 at 05:31

Los Frijoles · Answer 1 · 2012-04-22T05:53:56.963

Make a single page which takes an argument like view.php?start=100&end=150 and change your query to reflect that:

SELECT * FROM test LIMIT <escaped and sanitized "start">, <difference between "start" and "end">

The difference between start and end could also be some value passed to reflect how many elements to display on each page.

You can then use JQuery to sense when the bottom of the page becomes visible in the user's viewport and they you can use AJAX to ask the server to give you the next set of images.

So, the sequence goes like so:

User loads the page (view.php). Your script returns the full HTML for the page, elements 0-10 or something
The user scrolls to the bottom of the page. Your JQuery sees this happen and says $.post('view.php?ajax=true', { start: end+1, end: end+11 }, someFunctionThatResetsEndToReflectTheNewEndAndUpdateThePage );
Your script sees that it was an AJAX request (note: ajax=true) and returns XML or JSON with just the data that needs to be displayed. You could also just make a separate script to do this.
Your javascript function (the one that had the really long name above) handles the data and processes it into something that the user can understand

Was this resolved? I have the same problem, does anyone have an example of working code. my code is here http://stackoverflow.com/questions/13387383/masonry-infinite-scroll-from-db — Hector, Nov 16 '12 at 21:51
i found this one to be pretty useful http://codecanyon.net/item/masonry-with-infinite-scroll-and-facebook-connect/3897103 If you look at get_stream.php you will see the pagination logic — Hector, Apr 08 '13 at 21:43

Infinite Scroll JQuery / PHP (Loading page issue )

1 Answers1