Error in Image Gallery

Asked

Viewed 82 times

1

Edit: https://github.com/amrodr/galeria_projeto

I am having a small problem, when I upload my files to the server the images look like this, however when this location works normally.

The error is only fixed in case I refresh the page, if I do not refresh the images are like this one on top of the other!

Erro relatado

inserir a descrição da imagem aqui

javascript html css

  • Cara also includes the CSS and JS of his gallery, and if possible pass the link ai of the project so we can inspect. And what is the version of Bootstrap?

  • No, they move responsibly, this error only presents if I do not update the page, if update they go to the appropriate space

  • https://github.com/amrodr/galeria_projector. here is the repository to check the project

  • I located the line but did not find the error in this code, it only error when it is on the server

  • I did that but did not allow me to use the tag menu

  • So the code looks like this ? var $grid; $(window). on("load", Function(){ if(Document.getElementById("menu") || Document.getElementById("gallery")){ $grid = $(". grid"). Isotope({

  • Keeps crashing the menu and I don’t know why

  • I changed the Main.js code lines, locally all this ok, when I put on the server continues with the same error of one image overwriting the other, I will add the image in the question !

  • By putting this Script in HTML it stops reading my KKKK file and the error in the menu again

  • Now it worked thanks to you, the result came out as expected, I did cache and historical cleaning in the browser I stopped the site, the images appear on top of each other and after fully loading they are relocated each in its proper place, you are to congratulations, I am very grateful

Show 5 more comments

2 answers

1


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

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

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 has scope outside the function, as 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() { and others within, in addition to $( function() {. That is code redundancy, just the $(document).ready(function() { leading.

  • I am very layman I’m still starting in this world, so make things work is already of great value kkk, I need to improve the code a lot but with time I improve, thank you very much for helping me and for showing me the mistakes that I guarantee will not be committed anymore !

1

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

You can use imagesLoaded to solve this. Add this snippet to your file mais.js, down the line 61 is fine.

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

I explain, the first time your page is loaded, the images are still being loaded so the library has no size reference to load. Including this excerpt will cause the layout to be recalculated for each image being loaded. So, when giving F5, the images that are already cached are loaded in the DOM before the execution of the script, so 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>

Look how it turned out in http://jsfiddle.net/guiljs/cmxa2Lf0/

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.