Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

sowmatheus

Galeria de Imagens

Por , em PHP

Recommended Posts

sowmatheus    0

sowmatheus
Postado

Boa noite,

 

Gostaria de ajuda para criação de uma galeria de imagens.

 

O site referente é o mineraçãogalvao.com.br > Menu > Fotos.

 

O site é dividido por frames, e o carregamento das fotos no

frame principal do site apresenta: navegação/scroll lento, algumas

imagens não carregam e pelo celular da erro, nem chega a carregar.

 

o codigo referente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fotos Mineração Galvão</title>
</head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="10">
  <tr>
    <td><a href="imagens/mineracao_galvao/1.jpg" target="_blank"><img src="imagens/mineracao_galvao/1.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/2.jpg" target="_blank"><img src="imagens/mineracao_galvao/2.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/3.jpg" target="_blank"><img src="imagens/mineracao_galvao/3.jpg" width="300" height="200"  /></a></td>
  </tr>
  <tr>
    <td><a href="imagens/mineracao_galvao/4.jpg" target="_blank"><img src="imagens/mineracao_galvao/4.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/5.jpg" target="_blank"><img src="imagens/mineracao_galvao/5.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/6.jpg" target="_blank"><img src="imagens/mineracao_galvao/6.jpg" width="300" height="200"  /></a></td>
  </tr>
  <tr>
    <td><a href="imagens/mineracao_galvao/7.jpg" target="_blank"><img src="imagens/mineracao_galvao/7.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/8.jpg" target="_blank"><img src="imagens/mineracao_galvao/8.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/9.jpg" target="_blank"><img src="imagens/mineracao_galvao/9.jpg" width="300" height="200"  /></a></td>
  </tr>
  <tr>
    <td><a href="imagens/mineracao_galvao/10.jpg" target="_blank"><img src="imagens/mineracao_galvao/10.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/11.jpg" target="_blank"><img src="imagens/mineracao_galvao/11.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/12.jpg" target="_blank"><img src="imagens/mineracao_galvao/12.jpg" width="300" height="200"  /></a></td>
  </tr>
  <tr>
    <td><a href="imagens/mineracao_galvao/13.jpg" target="_blank"><img src="imagens/mineracao_galvao/13.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/14.jpg" target="_blank"><img src="imagens/mineracao_galvao/14.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/15.jpg" target="_blank"><img src="imagens/mineracao_galvao/15.jpg" width="300" height="200"  /></a></td>
  </tr>
  <tr>
    <td><a href="imagens/mineracao_galvao/16.jpg" target="_blank"><img src="imagens/mineracao_galvao/16.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/17.jpg" target="_blank"><img src="imagens/mineracao_galvao/17.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/18.jpg" target="_blank"><img src="imagens/mineracao_galvao/18.jpg" width="300" height="200"  /></a></td>
  </tr>
  <tr>
    <td><a href="imagens/mineracao_galvao/19.jpg" target="_blank"><img src="imagens/mineracao_galvao/19.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/20.jpg" target="_blank"><img src="imagens/mineracao_galvao/20.jpg" width="300" height="200"  /></a></td>
    <td><a href="imagens/mineracao_galvao/21.jpg" target="_blank"><img src="imagens/mineracao_galvao/21.jpg" width="300" height="200"  /></a></td>
  </tr>
</table>
</body>
</html>

Sou iniciante mas espero que me ajudem.

 

Att,

Matheus Gurgel.

Compartilhar este post

Link para o post
Compartilhar em outros sites

AndersonMamede    88

AndersonMamede
Postado

Olá!

 

Isso está acontecendo porque as imagens são GIGANTES!!!!! :P

São 22 imagens, com um total de 35,6MB! Por isso demora e trava tanto.

 

Para resolver, você vai ter que comprimir as imagens. Tem vários sites e softwares que fazem isto:

https://www.google.com.br/search?q=image+compress

 

Também é interessante você usar imagens com resolução menor na lista de fotos (ou seja, usar thumbnail = miniatura), e só exibir em tamanho original quando o usuário clicar na foto (no img src você usa a miniatura e no a href você usa em tamanho original). Isto vai deixar o site ainda mais leve.

 

Outra coisa que você pode fazer é utilizar lazy load:

https://www.google.com.br/search?q=javascript+lazy+load

Compartilhar este post

Link para o post
Compartilhar em outros sites

sowmatheus    0

sowmatheus
Postado

Boa tarde,

 

Então, fiz alguns ajustes no site,

reduzi o numero de imagens na seção Fotos e

dividi a seção em sub-paginas... melhorou bastante a navegação.

 

Porem, ainda estou com problema para acesso pelo celular,

Meu aparelho é um iPhone 6S, e não carrega nem a pau.

O safari ainda tenta recarregar a pagina algumas vezes

mas o erro persiste e o safari apresenta uma pagina como se

o link estivesse quebrado.

 

Acho que meu problema esta no redimensionamento/renderização das fotos

no aparelho. Uma unica vez q consegui carregar a pagina e fui

tentar dar zoom pelo aparelho acabou ocorrendo o erro e fui redirecionado

para pagina "quebrada".

 

Estou utilizando esta meta no index.php porem já tentei coloca-la em todas as paginas

mas não funcionou, código:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

sowmatheus    0

sowmatheus
Postado

Putz .. Mal minha,

esqueci de mencionar,

eu ja havia utilizado um site de compressão de imagem,

a original tem 9,7MB reduzi pra 1MB..

 

Vou tentar neste que vc me enviou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

sowmatheus    0

sowmatheus
Postado

Valeu Anderson,

Este site que você me passou tem muito mais opção do que o eu utilizei.

Fiz nas 6 primeiras fotos aqui e ja deu certo, vou continuar para as outras.

 

Obrigado!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito