Menu List

How to make load more gallery without reloading page using javascript.

Hi, today we are going to discuss making a load more gallery without reloading the page using javascript.

now lets start step by step,

Step 1.

first needed a gallery of image or text and need to give a unique class name to the thumbnail divs.

Step 2.

then make the div display none to give load more options

Step 3.

Make or add a button on the bottom portion or any portion of the page, on click of the button, there should be a function call.

Step 4.

make a function and slice the number of div you want to show the first time.

Step 5.

make a portion that will be executed on click of the load more button. slice the number of hidden div to show on each click of the button

Step 6.

detect if the number of hidden fields is 0 and then make the button disappear slowly.

Step 7.

on each click scroll the top slowly. to make the position at the top position of the newly shown field slowly.

Example of code on makes load more gallery without reloading the page using javascript.

Try it yourself

<!DOCTYPE html>
<html>
<head>
	<meta charset=”utf-8″> <!-- used for the character set used  -->
	<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
	<meta name=”viewport” content=”width=device-width, initial-scale=1″>
	<title>Javascript Load More</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css">
	  div.col-xs-4 {
          padding: 10px;
          border: 1px dotted;
      }
      div.col-xs-4 {
          display:none;
      }
      div.col-xs-12 {
          padding: 15px 0px;
      }
    </style>
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col-xs-4">
			1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			7. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			8. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			9. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			10. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			11. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			12. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			13. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			14. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			15. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
		<div class="col-xs-4">
			16. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<center>
				<a href="#" class="btn btn-success" id="loadMore">Load More</a>
			</center>
		</div>   
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
    $("div.col-xs-4").slice(0, 6).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div.col-xs-4:hidden").slice(0, 6).slideDown();
        if ($("div.col-xs-4:hidden").length == 0) {
            $("#loadMore").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
</script>
</body>
</html>

In this post, we have discussed on how to make a load more gallery without reloading the page using javascript. I hope that you have enjoyed the post and able to make a load more gallery using javascript.

Thanks for reading

Share The Post On -