1

Eu criei uma listagem que exibe 6 resultados e abaixo tenho um botão "Mostrar mais" que chama outra query que exibe 4 resultados. No entanto, os resultados dessa ultima query não mantém o CSS. Aparece desalinhado. Listagem da primeira query

inserir a descrição da imagem aqui

O código que tenho é o seguinte:

<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Portfolio</h2>
                <hr class="small">
                <div class="row">
                <?php
            $query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album ASC limit 6");
             while($cat=mysqli_fetch_assoc($query)){?>
                    <div class="col-md-6">
                        <div class="portfolio-item">
                        <p class="imgDescription"> <?php echo $cat['nome'];?> </p>
                            <a>
                                <img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?ida=<?php echo $cat['id_album'];?>'">
                            </a>
                        </div>
                    </div>
                    <?php } ?>

             <?php
            $query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album DESC limit 4");
            ?><div id="fotos" style="display:none"> <?php
             while($cat=mysqli_fetch_assoc($query)){?>
                    <div class="col-md-6">
                        <div class="portfolio-item">
                        <p class="imgDescription"> <?php echo $cat['nome'];?> </p>
                            <a>
                                <img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?ida=<?php echo $cat['id_album'];?>'">
                            </a>
                        </div>
                      </div>
                        <?php } ?>
                    </div>
                </div>
                <!-- /.row (nested) -->
                 <div id="button"><a class="btn btn-dark">View More Categories</a></div>
            </div>
            <!-- /.col-lg-10 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

O código do botão é o seguinte:

<script>
   $("button").click(function(){
      $("#fotos").fadeIn();
      $("#button").hide();
   });
</script>

Obrigada.

1
  • Primeiro problema: o seu código jQuery atribuindo evento de clique ao botão encontra-se incorreto. Ao invés de $('#button')' você colocou $('button')` sem o hashtag # que indica que é um Id, o que faz com que o evento não funcione. Sobre o problema de CSS, você tem de postar o seu CSS na pergunta para que alguém consiga resolver. 18/12/2017 às 16:01

2 Respostas 2

0

Vc está usando Bootstrap? Reveja como vc está organizando os seus objetos. Essa é a maneira prevista na documentação:

<div class="row">
  <div class="xxx-xx-#">Conteúdo da sua divisão 1</div>
  <div class="xxx-xx-#">Conteúdo da sua divisão 2</div>//Lembrando q a soma tem que ser 12
</div>
//Outra row
<div class="row">
  <div class="xxx-xx-#">Conteúdo da sua divisão 1</div>
  <div class="xxx-xx-#">Conteúdo da sua divisão 2</div>//Lembrando q a soma tem que ser 12
</div>

Note como vc está fazendo:

<div class="row">
   <div class="col-md-6">Suas fotos</div>
   <div id="fotos" style="display:none">
       <div class="col-md-6"></div>
   </div>
</div>

Perdeu o arranjo das divisões dentro da row.

Acho que deveria ser:

<div class="row">
   <div class="col-md-6">Suas fotos</div>
   <div class="col-md-6">
      <div id="fotos" style="display:none"> seu conteúdo</div>
   </div>
</div>
2
  • eu já alterei o código e agora apenas me devolve um resultado na segunda query. Eu coloquei assim: ´<?php $query?> <div class="col-md-6"> <div id="fotos" style="display:none;"> <div class="portfolio-item"> </div> </div> </div> <?php } ?>´
    – Claudia
    11/05/2016 às 14:02
  • O problema de inserir php em estrutura html é a legibilidade. Fica difícil para criar e muito muito mais difícil depois para dar a manutenção. Dá para fazer, não está errado, mas não é a primeira escolha. Tente criar sua página em html com as 6 primeira fots. Depois insira mais uma row de fotos. vc sabe que a primeira parte do código sempre vai estar lá e a segunda vai ser dinãmica. Depois vá passando lentamente para php. Com certeza é algo relacionado ao arranjo da página.
    – IgorAlves
    11/05/2016 às 14:42
-2

minha sugestão é que voce coloque classes que ocultam e exibem as colunas, ai voce nao precisa enfiar mais uma div entre as colunas...

  <div class="row">
//primeiro while
      <div class="col-sm-6">Conteúdo da sua divisão 1</div>
      <div class="col-sm-6">Conteúdo da sua divisão 2</div>  
//segundo while  
      <div class="col-sm-6 oculta">Conteúdo da sua divisão 3</div>
      <div class="col-sm-6 oculta">Conteúdo da sua divisão 4</div>
    </div>
        <div id="button"><a class="btn btn-dark">Ver mais</a></div>


<script>
   $("button").click(function(){
      $(".oculta").slideDown();
      $("#button").hide();
   });
</script>

<style>

.oculta{
    display:none
 }

 </style>

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