I have created a gallery for my website and I decided to use jQuery infinite scroll plugin (ex: facebook wall) on my gallery.
All datas are coming from PHP MyAdmin database. My question is, how to get datas to infinite scroll from database? My all codes are working without any issue.
index.php:
<?php
include ("connect_database.php");
$select_post = "SELECT * FROM posts ORDER BY rand() LIMIT 5";
$run_posts = mysql_query($select_post);
while ($row=mysql_fetch_array($run_posts)) {
$post_id = $row['post_id'];
$post_date = $row['post_date']; //.etc here
?>
<div id="container">
<!-- gallery codes here and five thumbnails are randomly loading on homepage -->
</div>
<!--Next page for INFINITE SCROLL-->
<nav id="page-nav">
<a href="next-page.php"></a> <!--please check script.js-->
</nav>
Next page is loading without any issue when I add a html or php file in <nav> tags.But I need to create a new php/html file for each loads.Can I have an idea to load next 5 thumbnails without creating a new file.I need to get next five thumbnails to infinite scroll from database.
script.js:
var $container = $('#container');
$container.infinitescroll({
// infinite scroll options...
navSelector : "#page-nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page-nav a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#container .box",
// selector for all items you'll retrieve
extraScrollPx: 10,
}
);
If you want to have 5 random posts load with every scroll, the you do not need to differentiate one request from the other (ex. page number).
Although I don't see this as a viable solution because you will end up with duplicate entries (you decide if this is a problem or not), you can use the 'path' option to call the next page like the example below.
$container.infinitescroll({
// infinite scroll options...
navSelector : "#page-nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page-nav a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#container .box",
// selector for all items you'll retrieve
extraScrollPx: 10,
path: function(index){
return "index.php?page=" + index;
}
}
);
Then of course you will have to tweak your index.php file to handle the page parameter correctly. Yet, again, having the random results, you will not need a 'page' parameter but rather always return "index.php" inside the path function and things should work fine.