How to Create an Infinite Scrolling Gallery in 10 Minutes

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.

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

  • 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>
<div><img 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.

Rakhitha Nimesh

Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on WordPress Web Application Development. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter and Google+

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. deasvr says

    hi i have problem with data.php

    $html = ”;
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $imgname= $row['title'];
    }
    $html .= ‘
    ‘.$imgname.’
    ‘;
    echo $html;
    exit;

    the problem is.. its only show the 1st word..
    example :
    you love me like this … ad it only show “you”.

    sorry for my bad english and thanks for helping

    • says

      I didnt understand your issue. Please explain further. What is “you love me like this” ? Is it the image name?

      Please tell me the exact changes you made to my demo code so that I can check it locally on my pc.

  2. Gary says

    ok, further to my last comment it seems the scroller doesn’t work in Firefox if you reference the image names in the database but store them on a different domain.

    • says

      Have you changed the code on the demo ? If so I need to look at your code before commenting on the issue. Will you be able to send the code or give a link to your demo where i can look for the issue ?

  3. Gary says

    Hi
    Just wanted to let you know on my Mac it failed to work in Firefox as well

    G,

  4. Tarun Allawadhi says

    hello i find my problem in mozilla the $(window).scrollTop() + $(window).height() is not always equal to $(document).height() some time there is difference between one and some time it is 2

  5. Tarun Allawadhi says

    Thanku so much for sharing this it helps me a lot i read many tutorial of infinite scrolling but my search ends here
    thanku so much but i have problem regarding this following conditition( if($(window).scrollTop() + $(window).height() == $(document).height()) {) is not working in firefox but it works on chrome can u help me please

    • says

      Thanks for the comment

      I have checked it in firefox and it works properly. Can you tell me the error message you are getting when you use firefox. Please tell me the firefox version you are using as well.

      • Tarun Allawadhi says

        Thanks for reply i am using mozila version 12.0 actually there is problem when the condition $(window).height() == $(document).height()) {) becomes equal then code is not executed inside and even when it satisfy the condition it doesn’t goes inside it shows loading morecontent div but it works good in chrome and ie i m using tag after div. is it create problem or not?

        • says

          If you have changed the code of the demo, I have to take a look at your demo to identify the issue. Demo should work properly on firefox. Also if you add any new elements add the end we might need to recalculate the heights

    • says

      I have used a single div for keeping these images. So if the divs are in different heights it will still work. But there will be lot of empty spaces between images. In your case you can use 3 divs as columns and assign each image to columns one by one. Then you will get the images without empty areas.

  6. says

    Hello ! very good. I like it.
    But How to make Lightbox like “yoxview”to work on it ?
    I tried, but it dont work in the part of ajax page readed…
    Thank you.

    Chris

  7. Bertold says

    Thank you! The only good tutorial out there.
    Easy to understand and works like charm!

  8. says

    Wow, it’s great.
    Just one thing I dont understand is the $(window).height(). The meaning that you are showing in the tutorial is the scroller’s height is the $(window).height().

    This means the bigger the $(document).height() will be the smaller $(window).height() will be. Isn’t it?

    Anyways I am working on it to know the real thing on it.

    Thanks for this awesome trick!!

    • says

      Hi Ashish

      Thanks for the comment and I corrected the issue you were having. $(window).height() is the browser viewport height. If you have a scroll on page $(window).height() will be lesser than $(document).height().

  9. says

    I think infinite scrolling is a nice feature for many webpages, but I think sometimes it’s overused. For examble: I don’t want to be able to scroll down a whole tumblr page, just because it’s cool. But the greater issue of this technic is that it’s killing the usability of the scrollbar.
    Firstly you’re never sure how much of the page you’ve allready seen.
    Secondly if you try to use the scrollbar to actually scroll with it, you allways get to the point, where the site loads new content. With the new content, you’re suddenly jumping to a far deeper part of the website, which is annoying. You were interrupted in reading or looking at something and you have to search, where you’ve been, before you can continue (if it’s worth the effort).
    Most people would argue, that no one ever really uses the scrollbar, in fact apple even “removed” it in OS X Lion, but I’m working quite a lot with a tablet with pen. So offen the scrollfactor is to low to scroll down a long webpage, but just right to work with in other programs. Than I have to use the scrollbar or kill my hand to get to where I want to read on.
    So I think if you want to grant best usabiliy to your readers, you should find a better way to organise content instead of using infinite scrolling.