Ir ao conteúdo
  • Cadastre-se
Ana Souza

Como fazer a galeria de fotos mostrar uma foto antes de clicar nela?

Recommended Posts

Olá tenho um código de uma galeria de fotos mas ela mostra só um fundo branco ao abrir a página, só irá aparecer a foto quando clicar em alguma.. gostaria que ao abrir a página já tivesse aparecendo uma foto na galeria antes de precisa clicar em alguma. Segue o código:

 

<div class="localgaleria">
   <script>
function div_tr_gt(u){
	var gth_y = 'url('+u+')';
	document.getElementById('i-div-imgh').style.backgroundImage = gth_y;
}
</script>

 
   <?php
$pasta = 'imagens/fotos/cachacaria';

if ($handle = opendir($pasta)) {
    
    /* Esta é a forma correta de varrer o diretório */
    while (false !== ($file = readdir($handle))) {
        echo'
<div id="i-div-imgh" class="div-img-pr" style="background-image:url('.$pasta.'/'.$file.');"></div>';
break;
    }

        closedir($handle);
}


echo'<div class="div-galeria">
<table>
<tr>';
 
 foreach(glob(''.$pasta.'/{*.jpg,*.gif}', GLOB_BRACE) as $image) {
	 
	 $img_p = "'";
	 $file = $fotos[] = $image;
	 $gty_array = array("",$img_p,$file,$img_p);
	 $rtyyui = implode("",$gty_array); 
	 
echo'<td><img onClick="div_tr_gt('.$rtyyui.');" src="'.$fotos[] = $image.'" width="50px" height="50px"></td>';
}
echo'</tr></table></div>';
?>

  </div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tópico movido de Java para Web

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Ana Souza

Poderia sugerir para você usar banco de dados. seria bem mais fácil do que fazer assim.

Compartilhar este post


Link para o post
Compartilhar em outros sites
19 horas atrás, dif disse:

@Ana Souza

Poderia sugerir para você usar banco de dados. seria bem mais fácil do que fazer assim.

Dif, eu quero fazer uma galeria de fotos em PHP usando o banco de dados, você tem algum tutorial que ensina a fazer?

Se possível com álbuns e as fotos para o álbum, ai cria outro álbum e as fotos depois.

Poderia fazer um canal com vídeo aulas, só acho, eu iria gostar muito, rsrsrs

Compartilhar este post


Link para o post
Compartilhar em outros sites

@carecazn Fazer uma video aula fica muito ruim para eu. Pois to sem mic para falar e tutorial com escrita em tela o pessoal reclama muito daí parei de fazer video aulas.

 

O que posso fazer por você é ensinar o básico, aqui pelo fórum, Contudo é uma boa ideia de material. Quando tiver tempo eu vou escrever um artigo sobre galeria de fotos em php e banco de dados. Agradeço pela ideia.

 

Então inicialmente precisa modelar o banco na qual você vai trabalhar.

Para isso, primeiro tens que pensar nas entidades(tabelas) que você precisa.

 

Como exemplo vou nomear essa tabela de "galeria".

 

Conterá os seguintes campos: ID(auto increment PK), nomeArquivo(varchar) e thumb(varchar )

Nesta tabela vai conter o valor ID do registro, o nome do arquivo "grande" e o nome do arquivo miniatura.

Porque miniatura? porque é mais rápido de carregar quando aparecer a galeria.

Outra coisa que é meio desnecessário é tentar colocar a imagem de background em galerias. 

 

Ok, agora como ficaria a tabela populada?

 

Desta maneira:

ID  nomeArquivo thumb
 1   foto.jpg   foto-thumb.jpg 

 

Vamos supor que temos esta estrutura de diretórios:

root
  |-galeria
       |-thumbs
       |  |-foto-thumb.jpg 
       | 
       |-img
          |-foto.jpg  

 

Com isso podemos montar o código em php:

<div class="galeria">
<?php
   $include'conexao.php';

   //instrução SQL 
   $buscaImg = mysqli_query($conexao, 'SELECT * FROM galeria');

  
  
   //Monta o laço while para mostrar todas as imagens
   while($galeria = mysqli_fetch_object($buscaImg)):
  
       //diretórios
      $thumbs = 'galeria/thumbs/' . $galeria->thumb;
      $fotos = 'galeria/img/' . $galeria->nomeArquivo; 
  
      echo"<div class='thumb'><img href='$fotos' target='_blank' src='$thumbs alt='$galeria->nomeArquivo'/></div>";

   endwhile;
?>  
  
</div>  

é bem simples o exemplo. Com isso você pode implementar o uso do jQuery e abrir as imagens em um "modal" ao invés de uma janela nova.

 

Por enquanto é só o que posso fazer no momento. estude o código e tente! Qualquer coisa é só prender o grito!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×