Create An Infinite Photo Gallery with jQuery and Ajax
File Size: | 2.51 MB |
---|---|
Views Total: | 23095 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.