Create An Infinite Photo Gallery with jQuery and Ajax

In this tutorial we're going to create a neat clean photo gallery that loads images form JSON data using Ajax requests. Great for creating a personal portofolio website.

Features:

• Ability to as many image as possible.
• Image loader to indicate the ajax loading progress.
• Animated image hover captions based on CSS3 transitions and transforms.
• Integrated with jQuery fancybox plugin to provide image zoom & lightbox functionality.
• Works with Bootstrap 3.

How to use it:

1. Include Bootstrap's stylesheet and the core CSS in your document's head sections.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">

2. Include the latest version of jQuery library in your document.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

3. Include the jQuery fancy box plugin after jQuery library.

<link rel="stylesheet" href="jquery.fancybox.css">
<script src="jquery.fancybox.js"></script>

4. The Html structure to create an ajax photo gallery with a image loader and a 'load more' button.

<div class="container">
  <header class="main-header">
   <img style="display:none;" class="spinner" src="loader.gif" alt="loader"/>
    <a class="next btn btn-default" href="#">Load more</a> </header>
  <div class="gallery"></div>
</div>

5. The Javascript to load image data from photos.json.

(function($){

  $(".fancybox").fancybox();

  function loopGallery(test, index, item){
    if(test){
      var box = $('<div class="col-md-4 box_animaux box-'+index+'"></div>');
      var pola = $('<div class="pola"></div>');
      var view = $('<div class="view thumb"></div>');
      var mask = $('<div class="mask"><h2>'+item.name+'</h2><p>'+item.description+'</p><a href="img/ara_bleu.jpg" class="info fancybox" rel="group" title="'+item.id+'" ><div class="alt">Voir</div></a></div>')

      $('.gallery').prepend(box);
      box.append(pola);
      pola.append(view);
      view.prepend('<img src="'+item.source+'">');
      view.append(mask);
    }
  }

  $.getJSON('json/photos.json', function(data){
    $.each(data, function(index, item){
      loopGallery(index <= 2, index, item);
    });
  });

  $('.next').on('click', function(event){
    event.preventDefault();
    var galleryLength = $('.pola').length;
    $.ajax('json/photos.json', {
      success: function(data){
        $.each(data, function(index, item){
          loopGallery(item.id >= galleryLength && item.id < galleryLength + 3, index, item);
        });
      },
      beforeSend: function(){
        $('.next').hide();
        $('.spinner').fadeIn();
      },
      complete: function(){
        $('.spinner').hide();
        $('.next').fadeIn();
      }
    });
  });


})(jQuery);

6. The data structure in the photos.json should be like this:

[
  {
    "id": 0,
    "name": "Image title",
    "description": "Image description",
    "source": "img/1.jpg"
  },
  {
    "id": 1,
    "name": "Image title",
    "description": "Image description",
    "source": "img/2.jpg"
  },
  {
    "id": 2,
    "name": "Image title",
    "description": "Image description",
    "source": "img/3.jpg"
  },
  {
  ...
  }
]

---

This awesome jQuery plugin is developed by GeoffreyPlichard. For more Advanced Usages, please check the demo page or visit the official website.