Css / Wordpress

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.


How to Create an Infinite Scrolling Gallery in 10 Minutes


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

1 <!--?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;
3 ?>

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.

1         Infinite Scroll
2 <script type="text/javascript" src="jquery-1.7.2.js"></script></pre>
3 <div id="more">Loading More Content</div>
4 <pre>
6 </pre>
7 <div id="no-more">No More Content</div>
8 <pre>
10 </pre>
11 <div id="result"></div>
12 <pre>
13 "; } ?> 

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.

1 $(window).scroll(function () {
3 });

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.

How to Create an Infinite Scrolling Gallery in 10 Minutes


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

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.

1 <script type="text/javascript">// <![CDATA[
2              var page = 1;             $(window).scroll(function () {                 $('#more').hide();                 $('#no-more').hide();                 if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
3                     $('#more').css("top","400");
4                     $('#more').show();
5                 }
6                 if($(window).scrollTop() + $(window).height() == $(document).height()) {
8                     $('#more').hide();
9                     $('#no-more').hide();
11                     page++;
13                     var data = {
14                         page_num: page
15                     };
17                     var actual_count = "<?php echo $actual_row_count; ?>";
19                     if((page-1)* 12 > actual_count){
20                         $('#no-more').css("top","400");
21                         $('#no-more').show();
22                     }else{
24                     }
26                 }
28             });
29 // ]]></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.

1 $.ajax({
2     type: "POST",
3     url: "data.php",
4     data:data,
5     success: function(res) {
6         $("#result").append(res);
7     }
8 });

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.

1 <!--?php <br ?-->$requested_page $_POST['page_num'];
2 $set_limit = (($requested_page - 1) * 12) . ",12";
4 $con = mysql_connect("localhost""username""password");
5 mysql_select_db("database_name");
7 $result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");
9 $html '';
11 while ($row = mysql_fetch_array($result)) {
12 $html .= "</pre>
13 <div><img src="images/&quot; . $row[" alt="" name="" /></div>
14 <pre>
15 ";
16 }
18 echo $html;
19 exit;
20 ?>

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.


Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

 Sign up!

21 Written Articles • Twitter • Website • Google+

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 Building Impressive Presentations with Impress.js. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at http://www.innovativephp.com or follow him on Twitter

25 CommentsBest Comments First

  • Benjamin Milde

     Monday, June 11th, 2012  12:32


    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.

  • Gary

     Thursday, August 9th, 2012  16:27


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


  • Bertold

     Tuesday, June 26th, 2012  15:39


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

  • Chris

     Tuesday, July 10th, 2012  06:06


    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.


    • Rakhitha Nimesh

       Friday, August 3rd, 2012  03:23


      Hello Chris

      I am not clear about your requirement. Can you explain it further.


  • Ferhat

     Wednesday, August 1st, 2012  10:00


    Thank you, how is it works if the div are not same height ?

    • Rakhitha Nimesh

       Tuesday, August 28th, 2012  20:36


      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.

  • ali karim

     Monday, June 18th, 2012  03:44


    It is a nice feature.

  • mosquito

     Tuesday, June 12th, 2012  00:52


    Google search result ought to have this feature.

    • Dainis Graveris

       Tuesday, June 12th, 2012  05:03


      Interesting that they took it off still.

  • Ashish

     Tuesday, June 12th, 2012  07:29


    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!!

    • Rakhitha Nimesh

       Wednesday, June 13th, 2012  13:17


      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().

  • Andrew

     Sunday, June 17th, 2012  12:13


    Just an comment! Amazing! This is Brilhant!

    • Dainis Graveris

       Sunday, June 17th, 2012  12:47


      Hah, strange comment Andrew! But glad you enjoy tutorial!

  • Tarun Allawadhi

     Thursday, August 2nd, 2012  09:40


    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

    • Rakhitha Nimesh

       Friday, August 3rd, 2012  03:20


      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

         Friday, August 3rd, 2012  12:27


        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?

        • Rakhitha Nimesh

           Monday, August 6th, 2012  03:46


          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

  • deasvr

     Monday, August 20th, 2012  02:09


    hi i have problem with data.php

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

    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

    • Rakhitha Nimesh

       Tuesday, August 28th, 2012  20:30


      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.

  • Gary

     Thursday, August 9th, 2012  17:34


    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.

    • Rakhitha Nimesh

       Tuesday, August 28th, 2012  20:26


      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 ?

  • Tarun Allawadhi

     Saturday, August 4th, 2012  07:33


    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

    • Rakhitha Nimesh

       Tuesday, August 28th, 2012  20:23


      Can you send me the complete code so that I can check ?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s