Продолжайте получать то же изображение

Question

Я пытаюсь создать галерею jQuery/Ajax, все работает, но когда я нажимаю кнопку «Bekijk», я всегда получаю одинаковое изображение, и следующая кнопка тоже не работает. Кто-нибудь может мне помочь?

(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

попытка изменить

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

Для

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

Также для Смотрите, у вас статический путь к изображению, так что будет держать же dispay изображение. изменить

<a href="img/4.jpg" 

Для

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