javascript - Infinite scroll with photoswipe -
i use infinite scroll imagesloaded , isotope , photoswipe photo gallery. when click on button "more photos" loads next photos. don't know how declare new photos photoswipe cause way it, when click on photo (of new ones), open one.
i got function declare photos photoswipe , function executed twice : first time @ dom load, second time when load next photos :
// 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; }); }); }
and later manage isotope :
/* * 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 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(); }); }
Comments
Post a Comment