Я использую бесконечную прокрутку с загруженными изображениями и isotope и photoswipe для фотогалереи. Когда я нажимаю на кнопку «Еще фотографии», загружаются следующие фотографии. Но я не знаю, как объявить эти новые фотографии фотосалфеткой, потому что, как я это делаю, когда я нажимаю на фотографию (из новых), она открывает другую.
У меня есть функция объявления фотографий для фотостирания, и эта функция выполняется дважды: первый раз при загрузке dom, второй раз, когда я загружаю следующие фотографии:
// Photoswipe declaration
new_photos_lightbox();
function new_photos_lightbox() {
$('.gal-photos>ul').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],
$height = $size[1];
var item = {
src : $href,
w : $width,
h : $height
}
items.push(item);
});
return items;
}
var items = getItems();
var $pswp = $('.pswp')[0];
$pic.on('click','li',function(event){
event.preventDefault();
var $index = $(this).index();
console.log($(this));
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true
}
// Initialisation PhotoSwipe
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
return false;
});
});
}
И позже я управляю изотопом:
/*
* Isotope
*/
var len = $('script[src*="js/isotope.pkgd.min.js"]').length;
if (len != 0) {
var $loaderAjax = $('.loader-ajax');
var $container = $('.grid');
$loaderAjax.show();
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.grid-item',
masonry: {
columnWidth: 200,
isAnimated: true,
isFitWidth: true,
gutter: 20
}
});
$container.infinitescroll({
navSelector : '#ms-gallery-nav',
nextSelector : '#ms-gallery-nav a',
itemSelector : '.grid-item',
loading: {
msgText: 'loading photos...',
finishedMsg: 'No more photos',
img: '../img/aj-loader.gif'
}
},
function( newElements ) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$container.isotope('appended', $newElems, true);
});
new_photos_lightbox();
}
);
// Deactivation infinite scroll the benefit of More button
$container.infinitescroll('unbind');
$('#next-page-button').on('click', function(e) {
e.preventDefault();
$container.infinitescroll('retrieve');
$(this).blur();
});
$("ul.grid li").css({'display': 'list-item'});
$("div.filter-button-group").animate({'opacity':'1'},500);
$loaderAjax.hide();
});
}