1

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

Pessoal estou tendo um pequeno problema, quando eu dou upload dos meus arquivos para o servidor as imagens ficam assim, entretanto quando esta local ele funciona normalmente.

O erro só é corrigido caso eu de refresh na pagina, caso não dê refresh as imagens ficam assim um em cima da outra!

Erro relatado

inserir a descrição da imagem aqui

10
  • Cara inclui tb o CSS e o JS da sua galeria, e se possível passe o link ai do projeto pra gente poder inspecionar. E qual é a versão do Bootstrap?
    – hugocsl
    Commented 28/09/2018 às 18:37
  • Não, eles se movem de forma responsiva, este erro só apresenta caso eu não atualize a pagina, se atualizar eles vão para o espaço adequado Commented 28/09/2018 às 18:56
  • github.com/amrodr/galeria_projeto aqui esta o repositorio para verificar o projeto Commented 28/09/2018 às 19:19
  • Localizei a linha mas não encontrei o erro neste codigo, ele só da erro quando tá no servidor Commented 28/09/2018 às 19:56
  • Fiz isso mas não me permitiou utilizar o menu de marcas Commented 28/09/2018 às 20:04

2 Respostas 2

1

O componente que você está usando está calculando de forma errada as dimensões das áreas das imagens porque elas ainda não foram carregadas. Em suma, o componente trabalha de forma assíncrona com o carregamento das imagens.

Para resolver isso, chame as opções do componente apenas quando as imagens forem carregadas, usando $(window).on("load"..., desta forma:

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"
           }
         })
   };
});

Você declara a variável $grid antes do $(window).on("load"... para que ela tenha escopo fora da função, pois você irá precisar dela em outra parte do código, como neste evento de clique:

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

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

Outra coisa que notei é que você tem um $(document).ready(function() { principal e outros dentro, além de uns $( function() {. Isso é redundância de código, basta apenas o $(document).ready(function() { principal.

1
  • Sou bem leigo ainda estou iniciando nesse mundo, então fazer as coisas funcionarem ja é de grande valor kkk, preciso melhorar bastante o código mas com o tempo vou me aprimorando, muito obrigado por me ajudar e por me mostrar os erros que garanto não serão mais cometidos ! Commented 28/09/2018 às 21:09
1

A culpa tem sido de um dos javascripts e no caso o isotope.pkgd.min.css.

Você pode usar imagesLoaded para resolver isso. Adicione este trecho no seu arquivo mais.js, lá pela linha 61 está bom.

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

Explico, a primeira vez que sua página é carregada, as imagens ainda estão sendo carregadas então a biblioteca não tem referência de tamanhos para carregar. Incluindo esse trecho fará que o layout seja recalculado para cada imagem sendo carregada. Por isso, ao dar F5, as imagens que já estão em cache são carregadas na DOM antes da execução do script, então fica tudo ok.

Obs: Alternativamente pode também inserir este javascript em seu html, mas o resultado do primeiro método é mais fluído e bonito.

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

    </script>

Veja como ficou em http://jsfiddle.net/guiljs/cmxa2Lf0/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .