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

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -