保持相同的图像

Question

I'm trying to make a jQuery/Ajax gallery, everything works but when i push the "Bekijk" button i always get the same image, the next button also doesn't work. Can someone help me?

(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/4.jpg" class="info fancybox" rel="group" title="'+item.id+'" ><div class="alt">Bekijk</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);

Answer 1

try to Change

  $('.next').on('click', function(event){

To

  $('body .next').on('click', function(event){

Also for Bekijk, You have static image path so it will keep same image dispay. change this

<a href="img/4.jpg"

To

 <a href="'+item.source+'"