javascript - Make lightbox work even before all images are loaded -

i'm using featherlite lightbox , problem is, have lot of images (thumbnails) load on page , when it's loading , click 1 of loaded image, lightbox doesn't work. therefore, go jpeg file on other page instead of modal window.

how can make lightbox after images loaded. way, i'm putting on wordpress don't want use plugin. i'm using foundationpress.

here's code use initiate lightbox

$(document).ready(function(){   $('a.gallery').featherlight({     targetattr: 'href'   }); }); 

i have images loaded script i'm using on masonry. how can put lightbox scripts inside images loaded plugin?

(function() {  // main content container var $container = $('.grid');  var $grid = $('.grid').masonry({   // options   columnwidth: '.grid-sizer',   itemselector: '.grid-item',   percentposition: true  });  // layout masonry after each image loads $grid.imagesloaded().progress( function() {   $grid.masonry('layout'); });  // infinite scroll $container.infinitescroll({      navselector  : '.pagination',    // selector paged navigation      nextselector : '.pagination a.next',  // selector next link (to page 2)     itemselector : '.grid-item',     // selector items you'll retrieve     loading: {             msg: null,             msgtext: '<i class="fa fa-circle-o-notch fa-spin"></i>',             finishedmsg: '<i class="fa fa-check"></i>',             img: null       }     },       // trigger masonry callback     function( newelements ) {         // hide new items while loading         var $newelems = $( newelements ).css({ opacity: 0 });         // ensure images load before adding masonry layout         $newelems.imagesloaded(function(){             // show elems they're ready             $newelems.animate({ opacity: 1 });             $container.masonry( 'appended', $newelems, true );         });  });  })(); 

i'm not sure if understood correctly solution like, use

https://github.com/desandro/imagesloaded

which made use cases masonry plugin layouts, check if images have finished loading , execute functions / other scripts.

for example:

$('#your-container').imagesloaded( {   },   function() {     $('a.gallery').featherlight({       targetattr: 'href'     });   } ); 

hope helps bit?