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

Hi, today we are going to discuss on making a loadmore gallery withour 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 unic 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 bpttom 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 first time.

Step 5.

make a portion which will be exicuted on click of the load more button. slice the number of hiden div to show on each click of the button

Step 6.

detect if the number of hidden field 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 new shown field slowly.

Example of coad on make load more gallery without reloading 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 disscussed on how to make a loadmore gallery withour reloading the page using javascript. Hope that you have enjoyed the post and able to make a loadmore gallery using javascript.

Thanks for reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.