How to load content with AJAX in pagination?

Question

When writing a gallery faced with a problem. There is pagination for the gallery. Each page should be different picture. As with the aid of AJAX upload new content to the gallery when switching pages? I would be grateful for an example!

 <!-- Pagination --> <div class="text-center"> <div class="container"> <ul class="pagination"> <li class="disabled"> <a href="#"> « </a> </li> <li class="active"> <a href="#"> 1 <span class="sr-only"> (current) </span> </a> </li> <li> <a href="#"> 2 </a> </li> <li> <a href="#"> 3 </a> </li> <li> <a href="#"> 4 </a> </li> <li> <a href="#"> 5 </a> </li> <li> <a href="#"> » </a> </li> </ul> </div> </div> <!-- Gallery --> <div class="gallery"> <div class="container"> <div class="row"> <h1 id="galleryTitel"> Your work </h1> <div class="col-lg-3 col-sm-4 col-xs-6"> <a title="Image 1" href="#"> <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png"> </a> </div> <div class="col-lg-3 col-sm-4 col-xs-6"> <a title="Image 2" href="#"> <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png"> </a> </div> <div class="col-lg-3 col-sm-4 col-xs-6"> <a title="Image 3" href="#"> <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png"> </a> </div> <div class="col-lg-3 col-sm-4 col-xs-6"> <a title="Image 4" href="#"> <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png"> </a> </div> </div> </div> 

Answer 1

To change the images you simply have to change their src; As I see you have a couple of links.

  var img1 = document.querySelector('YOURIMGID/CLASS');
  var img2 = document.querySelector('YOURIMGID/CLASS');
  var img3 = document.querySelector('YOURIMGID/CLASS');
  var img4 = document.querySelector('YOURIMGID/CLASS');
  document.querySelector('YOURLINKID/CLASS').onclick = function() {
        img1.src = "YOURNEWSRC";
        img2.src = "YOURNEWSRC";
        img3.src = "YOURNEWSRC";
        img4.src = "YOURNEWSRC";
  }