i'm working on website , using fullpage.js , tow sections, added link open gallery second section using ajax depending on gallery link clicked, content changed .. use isotope images layout problem images overlapping after ajax call, use $container.isotope( 'layout' );
index.php <div class="section"> <div class="slide"> <a href="#" class="gallery-link" data-id="1"></a> <a href="#" class="gallery-link" data-id="2"></a> <a href="#" class="gallery-link" data-id="3"></a> </div> <div class="slide"></div> ... </div> <div class="section"> <div class="ajax_content"></div> </div> now when click on link, should call ajax request , data page (ajax.php)
<?php foreach( $images $image ): ?> <div class="item"> <a class="fancylink" rel="sketch" href="<?php echo $image['url']; ?>"> <img class="img-responsive" src="<?php echo $image['sizes']['large']; ?>"/> </a> </div> <?php endforeach; ?> and call method on click this.
$('.slide').on('click','a',function(){ var url = "ajax.php"; var gid = $(this).data('id'); $.ajax({ type : 'post', url : url, data : { galleryid: gid }, success : function( response ) { $('.ajax_content').html('<div class="content" id="gallery-container">' +'<div class="isotope">'+response+'</div></div>'); var $container = $('.isotope'); $container.isotope({ itemselector: '.item', masonry: { columnwidth: 160, isfitwidth: true } }); settimeout(function(){ $container.isotope( 'layout' ); },100); $.fn.fullpage.moveto(3,0); }, error: function( message ){ console.log(message); } }); return false; });
you need use imagesloaded.js, allows images load before isotope fires. if using isotope v2 (imagesloaded not included in v1.56), download , add script page call isotope this:
var $container = $('.isotope'); $container.imagesloaded( function() { $container.isotope({ itemselector: '.item', masonry: { columnwidth: 160, isfitwidth: true } }); }); 