Image Gallery Error

1

Edit: link

I'm having a little problem, when I upload my files to the server the images look like this, however when this location works normally,

The error is only corrected if I refresh the page, if you do not refresh the images, stay on top of each other!

    
asked by anonymous 28.09.2018 / 20:31

2 answers

1

The component you are using is wrongly calculating the dimensions of the image areas because they have not yet been loaded. In short, the component works asynchronously with the loading of the images.

To resolve this, call component options only when images are loaded, using $(window).on("load"... , like this:

var $grid = $(".grid").isotope(); // declara a variável atribuída ao componente
$(window).on("load", function(){
   if(document.getElementById("menu") || document.getElementById("gallery")){
         $grid.isotope({
           itemSelector: ".all",
           percentPosition: true,
           masonry: {
             columnWidth: ".all"
           }
         })
   };
});

You declare the variable $grid before the $(window).on("load"... so that it is scoped out of the function because you will need it in another part of the code, as in this click event:

$('.filters li').click(function(){
  $('.filters li').removeClass('active');
  $(this).addClass('active');

  var data = $(this).attr('data-filter');
  $grid.isotope({
    filter: data
  })
});
  

Another thing I noticed is that you have a $(document).ready(function() { master and others inside, plus a $( function() { . That is   code redundancy, just the $(document).ready(function() {   main.

    
28.09.2018 / 23:03
1

The fault has been one of the javascripts and in this case the isotope.pkgd.min.css .

You can use imagesLoaded to resolve this. Add this snippet to your mais.js file, there by the line 61 is good.

 // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.isotope('layout');
    });

I explain, the first time your page loads, the images are still loading, so the library has no size reference to load. Including this section will cause the layout to be recalculated for each image being loaded. So, when giving F5, the images that are already cached are loaded into the DOM before the script is executed, then everything is ok.

Note: Alternatively you can also insert this javascript into your html, but the result of the first method is more fluid and beautiful.

    <script>
        $(window).load(function(){ $('.grid').isotope() });

    </script>

See how you got in link

    
28.09.2018 / 23:17