Create An Infinite Photo Gallery with jQuery and Ajax

File Size: 2.51 MB
Views Total: 23569
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//">
<link rel="stylesheet" href="css/style.css">

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

<script src="//"></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>

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



  function loopGallery(test, index, item){
      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>''</h2><p>'+item.description+'</p><a href="img/ara_bleu.jpg" class="info fancybox" rel="group" title="''" ><div class="alt">Voir</div></a></div>')

      view.prepend('<img src="'+item.source+'">');

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

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


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.