How to Create an Infinite Scrolling Gallery in 10 Minutes

Advertisement

Pagination is a technique used to break large data sets into small blocks in order to reduce the server load. We used to create pagination buttons with page numbers and next/previous links. Now pagination has gained a new perspective with infinite scrolling.

preview large infinitescroll web interface tutorials coding tutorials

Are you new to infinite scrolling? Then take a quick look at the demo before we start.

What is Infinite Scrolling

Infinite scrolling is where you can keep scrolling and data will keep coming until all the data is displayed. In this technique, the first set of data will be displayed initially. Once you scroll to the end of the window the next page of data will be generated and so on. No pagination buttons are required and you get the data on demand. Let’s see how we can create infinite scrolling.

What are we going to do?

We are going to create an infinite scrolling page with images, similar to Pinterest. These are the requirements needed before we start coding.

Infinite Scrolling Page web interface tutorials coding tutorials

  • Initial data set should be loaded on page load.
  • Once the scrollbar reaches the end of the window the next page of data should be displayed.
  • When we are close to the end of a page, message should be displayed mentioning “Loading More Content”.
  • Once all the data is generated, message should be displayed as “No More Content”.

Generating the Initial Data Set

When the page is loaded we have to get the data from the database and display the initial result. I have stored the names of the images in a database table. I have simplified the code using basic syntax so that beginners can go through the tutorial without any problems.

!--?php $con = mysql_connect("localhost", "username", "password"); mysql_select_db("database_name"); $result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12"); $row_object = mysql_query("Select Found_Rows() as rowcount"); $row_object = mysql_fetch_object($row_object); $actual_row_count = $row_object---rowcount;

?

The result will be broken into pages of 12 images. So the above code generates the first 12 results from the database table. Also keep in mind that $actual_row_count variable will hold the total number of images available in the table.

So lets move onto creating the initial version of our HTML document.

        Infinite Scroll
script type="text/javascript" src="jquery-1.7.2.js"/script/pre
div id="more"Loading More Content/div
pre

/pre
div id="no-more"No More Content/div
pre

/pre
div id="result"/div
pre
"; } ?

I have included jQuery and some sample CSS code to style our page at the top. In the body section you can see 2 div elements called more and no-more. These are used to show the status when we keep scrolling and position of these divs are made fixed. Next we are going to display the images inside the PHP code using the results we generated earlier. So the initial data set is displayed now and we have to create the scrolling part.

Paginating Data Using Scrolling

Let’s add the jQuery scrolling event to our page. jQuery provides a built-in function called scroll as shown in the code below.

            $(window).scroll(function () {

            });

Whenever you scroll to the top or bottom, the code inside this function will be executed. Identify end of the Page We are loading the next set of data, once the scroll reaches the end of the page. So first we have to identify the end of the page. Now I’ll show you a simple technique for that.

if($(window).scrollTop() + $(window).height() == $(document).height()) {

}

jQuery scrollTop function will return the area hidden on the top of your page. $(window).height() gives the height of the browser viewport. So addition of both values will be equal to the page height, when scroll reaches the bottom. Pretty simple isn’t it? Now we got the basics covered and we can move onto the full script code as shown below.

script type="text/javascript"// ![CDATA[
             var page = 1;             $(window).scroll(function () {                 $('#more').hide();                 $('#no-more').hide();                 if($(window).scrollTop() + $(window).height()  $(document).height() - 200) {
                    $('#more').css("top","400");
                    $('#more').show();
                }
                if($(window).scrollTop() + $(window).height() == $(document).height()) {

                    $('#more').hide();
                    $('#no-more').hide();

                    page++;

                    var data = {
                        page_num: page
                    };

                    var actual_count = "?php echo $actual_row_count; ?";

                    if((page-1)* 12  actual_count){
                        $('#no-more').css("top","400");
                        $('#no-more').show();
                    }else{

                    }

                }

            });
// ]]/script

Code Explanation

  • First we define the variable to hold the current page number. Initially it will be 1.
  • Message boxes are made hidden at the beginning of scroll.
  • Next you can see the if statement which I didn’t explain earlier. We have to show the message “Loading More Content” just before the scroll reaches end. I have defined it to be displayed 200px before the end of document.
  • Then inside the if statement used to identify bottom of page, page number is increased by one and the total data count is stored.
  • Then simple calculation is done to check whether total results are displayed. If so we show the message “No More Content”.
  • Now it’s time to generate the next page, which I will be explaining in the next section.

Requesting Data for Next Page

We have to use an Ajax call to request the next page from server as shown below. This code should be inside the else part we left empty in the earlier code.

                        $.ajax({
                            type: "POST",
                            url: "data.php",
                            data:data,
                            success: function(res) {
                                $("#result").append(res);
                            }
                        });

Creating Page for Data Generation

We need a separate PHP file to request the Ajax request data. I have created a file called data.php to generate results as shown below.

!--?php br ?--$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");

$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");

$html = '';

while ($row = mysql_fetch_array($result)) {
$html .= "/pre
divimg src="images/quot; . $row[" alt="" name="" //div
pre
";
}

echo $html;
exit;
?

We are done with creating the infinite scrolling pagination. Let’s have a look at how it is used in popular websites.

Inspirational uses of Infinite Scrolling

1. Google Reader

Google Reader uses this technique to generate feed items. You can see a 3 colored circles at the end of the page while more data is loaded.

Google Reader Infinite Scrolling
2. Facebook Wall

Facebook uses infinite scrolling to display the posts in the wall.

Facebook Wall Infinite Scrolling

3. Pinterest

Pins are generated on demand as you keep scrolling.

Pinterest Infinite Scrolling

4. Twitter

Twitter tweet stream is generated using the infinite scrolling technique.

Twitter Infinite Scrolling

We have learned how to create an infinite scrolling page and various kind of practical uses of this techniques using most popular sites in the world. Now it’s your chance to make a move and create something new with infinite scrolling.

How are you going to use this technique? Feel free to share your comments.

Advertisement
How to Create an Infinite Scrolling Gallery in 10 Minutes | manda | 4.5
%d bloggers like this: