Jump to content

Recommended Posts

Olá amigos.

espero que estejam todos bem.

 

Estou tentando criar uma galeria de imagens e colocar nestas um botão para votação (Gosto como no Facebook).

Já consegui criar a galeria e colocar o Like nas imagens, mas acontece que quando  as imagens passam para a linha de baixo o botão Like não acompanha a imagem.

 

Junto uma imagem para exemplificar como está e como deveria ser.

 

O CSS está assim

h1 {
    text-align: center;
    color: forestgreen;
    margin: 30px 0 50px;
}

.container h2 {
    text-align: center;
    color: rgb(8, 8, 8);
    margin: 30px 0 50px;
}

.gallery {
    margin: 10px 50px;
    padding-right: 0px;
    padding-left: 0px;
}

.gallery img {
    width: 230px;
    padding: 0px;
    opacity: 0.5;
    filter: grayscale(10%);
    transition: 1s;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    border: 2px solid #ccc;
    border-radius: 10%;
}

.ilike {
    display: grid;
    border-radius: 10%;
    box-sizing: border-box;
    text-align: left;
    padding: 15px;
    font-size: 20px;
    vertical-align: top; 
    position: absolute;
    z-index: 1000;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    color: white;
}

O código da página da galeria de fotos está assim:

<div class="gallery">
<?php
$sql = "SELECT * FROM tbl_gallery where aid=$aid";
$num_rows = mysqli_num_rows(mysqli_query($conectar, $sql));

$result = mysqli_query($conectar, $sql);

while ($row = mysqli_fetch_array($result)) {

    $gimage = $row['gimages'];
    $fotoid = $row['gid'];
    $likes = $row['likes'];
  

    ?> <a href="páginapararegistarovoto" ?>
	"><i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a>
<i class="inum" > <?php echo "Foto " . $fotoid; ?> </i>
	<?php

    echo "<a href='../fotos/$gimage' data-lightbox='mygallery' data-title='Foto n.º: $fotoid'><img src='../thumbnails/$gimage' class='pic'></a>";

} ?>
</div>

 

 

 

Sem Título.png

Share this post


Link to post
Share on other sites

Simples sua tag <a> deve está dentro de uma tag <div> essa recebe a propriedade "relative".

  • A tag <a> vai dentro da <div> relativa
  • A tag <a> recebe a propiedade "block"
  • A imagem vai dentro da tag <a>
  • O elemento de "LIKE" dentro da taga <div> relativa fora da tag <a>.
  • O elemento de "LIKE" recebe a propriedade "abusolute"

No mais o resto é posicionar o elemento do "LIKE" usando left e top

Share this post


Link to post
Share on other sites

Muito obrigado Omar~.
Infelizmente não estou conseguindo fazer com que funcione (não tenho muitos conhecimentos de php).

 

Coloquei assim:

while ($row = mysqli_fetch_array($result)) {

    $gimage = $row['gimages'];
    $fotoid = $row['gid'];
    $likes = $row['likes'];
    $dislikes = $row['dislikes'];
    ?>
<div class="princ">
	<div class="a">
    <a href="../administrar/processa/proc_cad_voto.php?foto=<?php echo $fotoid; ?>"> <i class="far fa-thumbs-up ilike" alt="Vote"> <?php echo $likes; ?> </i></a>
</div>
<a href="../fotos/<?php echo $gimage ?>" data-lightbox="mygallery" data-title="Foto n.º: <?php echo $fotoid ?>"><img src="../thumbnails/<?php echo $gimage ?>" class="pic"></a>
<i class="inum" > <?php echo "Foto " . $fotoid; ?> </i>

</div>

<?php
}?>

E no CSS coloquei assim:

.gallery img {
    width: 230px;
    padding: 0px;
    opacity: 0.5;
    filter: grayscale(10%);
    transition: 1s;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    border: 2px solid #ccc;
    border-radius: 10%;

}

.princ {
    position: relative;
}

.a {
    display: block;

}

.ilike {
    text-align: left;
    padding: 15px;
    font-size: 20px;
    vertical-align: top;
    position: absolute;
    z-index: 1000;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    color: white;
}

Mas as imagens ficam dispostas na vertical e não na horizontal....
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alberto Nascimento
      Como consigo salvar o "novo nome" da imagem que foi enviada para o servidor por meio de UPLOAD no mesmo registro em que estão sendo salvos os dados do formulário no banco de dados através do PHP.
      Consigo salvar os campos do formulário, mas o nome que é gerado ao enviar a imagem, não estou conseguindo.
       
      <?php include 'conecta_mysql.inc'; if(isset($_FILES['arquivo']['name']) && $_FILES["arquivo"]["error"] == 0) { echo "<center>Você enviou o arquivo: <strong>" . $_FILES['arquivo']['name'] . "</strong><br /></center>"; echo "<center>Seu tamanho é: <strong>" . $_FILES['arquivo']['size'] . "</strong> Bytes<br /><br /></center>"; $arquivo_tmp = $_FILES['arquivo']['tmp_name']; $nome = $_FILES['arquivo']['name']; $extensao = strrchr($nome, '.'); $extensao = strtolower($extensao); if(strstr('.jpg;.jpeg;.gif;.png', $extensao)) { $novoNome = md5(microtime()) . '.' . $extensao; $destino = 'imagens/' . $novoNome; if( @move_uploaded_file( $arquivo_tmp, $destino )) { echo "<br>"; echo "<img src=\"" . $destino . "\" />"; echo "<br>"; } else echo "Erro ao salvar o arquivo. Aparentemente você não tem permissão de escrita.<br />"; } else echo "Você poderá enviar apenas arquivos \"*.jpg;*.jpeg;*.gif;*.png\"<br />"; } else { echo "<center><h1>Você não enviou nenhum arquivo!</h1></center>"; echo "<center><br><h3><a href='javascript:window.history.go(-1)'>Clique aqui para volta.</a></h3></center>"; } $codphoto = $_POST['codphoto']; $nome = $_POST['nome']; $datafotografia = $_POST['datafotografia']; $photography = $_POST['novoNome']; $sql = "INSERT INTO photograph VALUES"; $sql .= "( '$codphoto', '$nome', '$datafotografia', '$photography' )"; if ($conexao->query($sql) === TRUE) { echo "<center> <h2> Obrigado !! Envio realizado com sucesso !! </h2></center>"; echo "<center><br><h3><a href='LINK_SITE'>ENVIAR OUTRA FOTOGRAFIA</a></h3></center>"; } else { echo "Erro: " . $sql . "<br>" . $conexao->error; } $conexao->close();  
    • By Kaio Kdesigner
      Oi Pessoal!
       
      Estou editando um tema, e ai as imagens dos thumbsnails estão ficando distorcidas.
       
      Cada categoria tem um tamanho diferente de imagem, mas ai elas ficam destorcidas dentro do tamanho (meio confuso né?)
       
      ta ficando assim: https://screenshot.net/gxvqc9y
       
      Como que faço para colocar a imagem dentro do tamanho, ex: 150x150, sem q ela fique distorcida??
    • By alexdcarvalho
      Como colocar uma imagem no html/css sem que a qualidade dela não decaia? Eu fiz os procedimentos abaixo, achando que a coisa pudesse melhorar, porém a imagem horizontalmente fica esticada, toda a resolução se perde. O que eu quero é justamente fazer com que o width fique completo e o height no 300px, porém com uma qualidade boa.
       
       A resolução original da imagem é de 1920x1279.
       
      .img {     width: 100%;     height: 300px;     background-size: cover;     background-position: center right; }
    • By DanielF
      Pessoal Eu Recentemente estava fazendo um gerador de qr-code, e preciso criar um botão que quando a pessoa clique apareça para poder baixar/fazerdownload da imagem gerada, pode me ajuda? to preso nisso faz tempo, e se puderem podem Organizar o codigo para mim? 
       
       
       
       
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>QR-Code</title>
          <style type="text/css">
              #qrcode {
                  border: 1pt solid gray;
                  display: inline-block;
              }
          </style>
      </head>
      <body>
          <center>
              <input type="text" name="qrtexto" id="qrtexto" onkeypress="gerarqr();" onkeyup="gerarqr();"><br>
              <br>
              <button onclick="gerarqr();" on>Gerar</button>
              <button onclick="limpar();" on>Limpar</button>
          </center>
          <br>
          <br>
      <center>
          <div id="qrcode"></div>
      </center>
      <br>
      <center>
      <button onclick="baixar();">Baixar (Em Breve)</button>
      </center>
      <script src="qrcode.min.js"></script>
      <script>
          qrcode.innerHTML="<img src='limpo.png'>";
          function gerarqr(){
      var qrcode=document.getElementById('qrcode');
      qrcode.innerHTML=" ";
      var texto=document.getElementById("qrtexto").value;
          var qrcodee = new QRCode(qrcode, {
          text: texto,
          width: 300,
          height: 300,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
      });
      }
      function limpar(){
      qrcode.innerHTML="<img src='limpo.png'>";
      }
      function baixar() {
      }
      </script><br><br><br><br><br><br><br>
      <h6 align="center">Feito por Itz_Topz</h6>
      </body>
      </html>
    • By Sherlock02
      Olá!
       
      Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
      (Vou anexar uma imagem para exemplificar o que desejo).
       
      Segue o código:
      .post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;}  
      <div  id='mainwrapper'> <div class="post">   <div class="post-entry">        1 Post com width 100%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        2. Post com width 48%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        3. Post com width 48%. Here goes my post.   </div> </div>   </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
       
      Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
      Obrigada!

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.