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 Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
    • 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>
×

Important Information

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