Ir para conteúdo
Fórum Script Brasil
  • 0

Galeria Pronta, mas precisando de um pequeno detalhe


André Monjardim

Pergunta

Olá pessoal, estou precisando de uma ajuda com a minha Galeria de Imagens.

O código abaixo é bem simples e está funcionando perfeitamente.

Mesmo eu não entendendo muito de programação fui mexendo em alguns scripts e achei esse o ideal, mas gostaria que tivesse as funções de passar as fotos pra frente e pra trás... isso eu não estou conseguindo. Alguém pode me ajudar?

No final do script tem o link de teste.

Desde já agradeço.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Galeria de Fotos</title>

</head>

<body>

<table border="0" align="center" width="400" style="margin-top:0">

<tr>

<td align="center">

<?php

// Config

$dir="./";

@$imagem=$_GET["imagem"];

$dh=opendir($dir);

$imagens=6;

$self=index.php";

@$pop=$_GET["pop];

@$pag=$_GET["pag"];

if(!($pag)){

$pag=1;

}

if(isset($pop)){

$tamanho=strlen($imagem)-4;

$nomeimg=substr($imagem,"0",$tamanho);

// Foto clicada

echo "

<HTML>

<body>

<table border=1 width=100% cellpadding='5' cellspacing='5'>

<tr><td bgcolor='#2b2a2b' colspan=3>

&lt;script language='JavaScript'> document.write('<center><img src=\"$imagem\" border=\"0\">')</script><br>

</td></tr>

";

// Tenho dúvida neste ponto!

echo "

<td align=center><font face='verdana,arial' size='1'><a href=''><b><font color='#800000'>Anterior</font></b></a></td>

<td align=center><font face='verdana,arial' size='1'><a href='index.php'><b><font color='#800000'>Galeria</font></b></a></td>

<td align=center><font face='verdana,arial' size='1'><a href=''><b><font color='#800000'>Próxima</font></b></a></td></tr>

";

// Fim da Dúvida

echo "

<br>

</body>

</HTML>";

exit();

} else {

while(false!==($filename=readdir($dh))){

if(substr($filename,-4)==".jpg"){

$filearray[]=$filename;

sort($filearray);

}

}

$totfim=$pag*$imagens;

$inicio=$totfim-$imagens;

$total=count($filearray);

$totalpag=ceil($total/$imagens);

$ni2=ceil($imagens*$pag);

if($totfim>$total){

$totfim=$total;

}

// Galeria

echo "<table align='center' cellspacing='1' height='200' border='0' width='400'>";

echo "<tr><td height='1' bgcolor='#cccccc'></td></tr>";

echo "<tr><td height='150' align='center' bgcolor='#2b2a2b'>";

echo "<table border='0' cellspacing='2'><tr>";

$break=0;

for($i=$inicio;$i<$totfim;$i++){

$imagem=$filearray[$i];

$nome1=explode(".",$imagem);

$nome=$nome1[0];

echo "<td align='center' valign='baseline' bgcolor='#2b2a2b'>";

echo "<table cellspacing='1'><tr><td valign='baseline'><a href=index.php?imagem=$imagem&pop=1 target='_parent'><img src=thumbs/$imagem border=0 width=45></a>";

echo "</td></tr></table>";

}

// Paginação

$paginamax=$pag+1;

if($paginamax>$totalpag){

$paginamax=$totalpag;

}

if($paginamax<$totalpag){

}

$paginamin=$pag-1;

if($paginamin==0){

$paginamin=1;

}

echo "</td></tr></table>";

echo "<tr><td height='1' bgcolor='#cccccc'></td></tr>";

echo "</table>";

echo "<table border=0 width=100% align=center>";

echo "<tr><td align=left>";

echo "<font face='verdana' size='1'><a href='$self?pag=$paginamin'>Anterior</a></font></td>";

echo "<td align=right><font face='verdana' size='1'><a href='$self?pag=$paginamax'>Próxima</a></font></td></tr>";

echo "<tr><td colspan=2 align=center>";

for($pg=1;$pg<=$totalpag;$pg++){

echo "<font face='verdana,arial' size='2'><b><a href='$self?pag=$pg'>".$pg."</b></a>  "; }

echo "</td></tr>";

echo "<tr><td colspan=3 align=center>";

echo "<font face='verdana,arial' size='1'>Total imagens: ".$total;

echo " - ";

echo " Página atual: ".$pag."</font><br>";

echo "</td></tr></table><br>";

}

?>

</td>

<tr>

</table>

<br>

</body>

</html>

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

Posts Recomendados

  • 0

Para isso, o que você pode fazer é no link "Próxima", colocar o parâmetro "pag" e passar a página atual somando 1. Para o link "Anterior" a mesma coisa, mas subtraindo 1. Ex:

<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=<?php echo($pag+1);?>'><b><font color='#800000'>Próxima</font></b></a></td></tr>

Qualquer dúvida, fala aí!

Link para o comentário
Compartilhar em outros sites

  • 0
Para isso, o que você pode fazer é no link "Próxima", colocar o parâmetro "pag" e passar a página atual somando 1. Para o link "Anterior" a mesma coisa, mas subtraindo 1. Ex:

<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=<?php echo($pag+1);?>'><b><font color='#800000'>Próxima</font></b></a></td></tr>

Qualquer dúvida, fala aí!

Por um momento até pensei que fosse funcionar, mas não deu certo ainda.... acho que falta alguma informação sobre GET, explode, array e mais algum coisa que não sei o que é. =/

Obrigado

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0
Aqui aparenta estar funcionando corretamente.

você clicou nos links quando a foto abre ou somente enquanto está na galeria?

quando eu clico em "próxima" o endereço que aparece é esse = "http://www.flashmais.com.br/mobile/fotos/teste/index.php?pag=%3C?php%20echo(1+1);?%3E" (sem as aspas) e quando clico em anterior aparece "index.php?pag=%3C?php%20echo(1-1);?%3E"

editei assim como sugerido:

echo "
<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=<?php echo($pag-1);?>'><b><font color='#800000'>Anterior</font></b></a></td>
<td align=center><font face='verdana,arial' size='1'><a href='index.php'><b><font color='#800000'>Galeria</font></b></a></td>
<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=<?php echo($pag+1);?>'><b><font color='#800000'>Próxima</font></b></a></td></tr>
";

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0

Ao invés de

echo "
<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=<?php echo($pag-1);?>'><b><font color='#800000'>Anterior</font></b></a></td>
<td align=center><font face='verdana,arial' size='1'><a href='index.php'><b><font color='#800000'>Galeria</font></b></a></td>
<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=<?php echo($pag+1);?>'><b><font color='#800000'>Próxima</font></b></a></td></tr>
";
O correto seria
echo "
<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=".$pag-1."'><b><font color='#800000'>Anterior</font></b></a></td>
<td align=center><font face='verdana,arial' size='1'><a href='index.php'><b><font color='#800000'>Galeria</font></b></a></td>
<td align=center><font face='verdana,arial' size='1'><a href='index.php?pag=".$pag+1."'><b><font color='#800000'>Próxima</font></b></a></td></tr>
";

Ou seja, você não pode colocar um echo dentro de outro echo.

Mas como você quer colocar pra passar de foto, acredito que seja necessário pegar o id da foto atual e passar pela URL a id da seguinte (ou anterior caso seja para voltar)...

Editado por mJi
Link para o comentário
Compartilhar em outros sites

  • 0

Sim, mas em todas as imagens, o 'pop' recebe o valor '1'. Caso você queira usá-lo, deve atribuir um valor diferente para cada imagem.

Então, será possível usá-lo para navegar pelas imagens. Basta alterar os parÂmetros passados por GET nos links 'Próxima' e 'Anterior'.

Link para o comentário
Compartilhar em outros sites

  • 0
Sim, mas em todas as imagens, o 'pop' recebe o valor '1'. Caso você queira usá-lo, deve atribuir um valor diferente para cada imagem.

Então, será possível usá-lo para navegar pelas imagens. Basta alterar os parÂmetros passados por GET nos links 'Próxima' e 'Anterior'.

Mas ai é que tá o problema... não entendo nada disso, por mais que eu tente não consigo ver o que é certo ou errado.

Esse script eu modifiquei e eliminei o popup, quando se clicava na foto se abria um popop... eu quis q abrisse da forma que abre agora... e até ai tudo bem... mas no script original não tem os links anterior e próxima... por isso que recorri a esse forum pra que pudessem me ajudar.

Se você puder, e tem ideia como faz isso, gostaria que passasse de forma prática como faz pra isso funcionar.

Desde já agradeço

Link para o comentário
Compartilhar em outros sites

  • 0

Parece que as imagens são exibidas pelo fato de estarem localizadas num diretório. O diretório é lido e as imagens vão para um array.

Você deve conferir qual posição do array é a que possui a imagem que está sendo atualmente exibida, e linkar 'anterior' à exibição da imagem localizada no índice anterior ao atual. O mesmo se aplica á imagem seguinte.

O negócio é o seguinte... se tu não procurar aprender um pouco sobre a linguagem, só pedindo pra alguém fazer para você.

Link para o comentário
Compartilhar em outros sites

  • 0
Parece que as imagens são exibidas pelo fato de estarem localizadas num diretório. O diretório é lido e as imagens vão para um array.

Você deve conferir qual posição do array é a que possui a imagem que está sendo atualmente exibida, e linkar 'anterior' à exibição da imagem localizada no índice anterior ao atual. O mesmo se aplica á imagem seguinte.

Existe sim um diretório para as thumbs como menciona o script

Vou disponibilizar todo o script assim como algumas fotos num arquivo zipado no link abaixo.

Se trata de um único arquivo "index.php" onde deixei na mesma pasta das fotos maiores e as miniaturas, no diretório "thumbs". As fotos, tanto as grande quanto as pequenas tem a mesma nomeação pra que possam ser achadas facilmente ao serem clicadas. Esse script não necessita do MySQL.

Neste mesmo arquivo "index.php" encontra uma paginação simples que serve para dar mais conforto a apresentação das miniaturas e no próprio script pode-se facilmente escolher qtos thumbs deseja em cada página.

No script original quando se clica na miniatura abria a foto maior em um popup, mas modifiquei para que abra direto em "_parent".

Para finalizar, só preciso que nas fotos grandes, quando abertas, tenham os links de direção "Anterior" e "Próxima".

Desde já agradeço a colaboração.

Este script depois de fechado, completo, será disponibilizado para os amigos que desejam criar em seus sites uma galeria mais leve que rode bem em mobiles, que é o meu caso.

Os arquivos estão no link abaixo

http://www.flashmais.com.br/mobile/fotos/teste/arquivos.zip

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0
Amigo, me desculpa, mas acho que você não entendeu bem... como eu disse ai em cima eu modifiquei o script e deixei como eu gostaria que estivesse! Fui até onde a minha capacidade alcançou, por isso que estou num forum pedindo ajuda pra justamente aprender, como todos aki fazem.

Se acha que estou incomodando, então é simples, evite responder. Deixa essa árdua missão pra outra pessoa.

Mas de qualquer modo, eu agradeço a sua ajuda.

Nossa amigo, em momento algum eu falei que você está encomodando ou levantei dúvidas quanto à sua capacidade...

O que quero dizer é que se você tivesse recorrido à documentação da linguagem, já teria resolvido este problema há algum tempo, e de quebra, teria aprendido (muito mais do que aprenderia em um fórum, por exemplo).

Sobre o problema, minha observação anterior permanece

Parece que as imagens são exibidas pelo fato de estarem localizadas num diretório. O diretório é lido e as imagens vão para um array.

Você deve conferir qual posição do array é a que possui a imagem que está sendo atualmente exibida, e linkar 'anterior' à exibição da imagem localizada no índice anterior ao atual. O mesmo se aplica á imagem seguinte.

Link para o comentário
Compartilhar em outros sites

  • 0

Dei uma olhada aqui no index.php, algumas tarefas fáceis foram feitas de maneira muito complicada..

Modifiquei algumas coisas, baixa aqui e veja o que achou.

Parece que tá tudo funcionando.

Coloque as miniaturas na pasta 'thumbs' e as imagens em tamanho original na pasta 'imagens'. Lembre-se que ambas (a imagem e sua respectiva miniatura) devem ter o mesmo nome/extensão.

Editado por mJi
Link para o comentário
Compartilhar em outros sites

  • 0
Dei uma olhada aqui no index.php, algumas tarefas fáceis foram feitas de maneira muito complicada..

Modifiquei algumas coisas, baixa aqui e veja o que achou.

Parece que tá tudo funcionando.

Coloque as miniaturas na pasta 'thumbs' e as imagens em tamanho original na pasta 'imagens'. Lembre-se que ambas (a imagem e sua respectiva miniatura) devem ter o mesmo nome/extensão.

ficou muito bom... mas tem uma coisa que to reparando que pode ser uma falha.

Repare... se eu tenho 12 imagens e programo pra que leia 5 imagens por vez, ele deveria formar 3 página, a 1º com 5, a 2ª com 5 e uma 3ª com apenas 2 imagens... mas nessa última página acusa 3 imagens reais e 2 falsas completando o ciclo.

to aqui ainda analisando... mas de qualquer forma ficou muito bom!

Dei uma varredura pra achar onde entrava "index.php" e troquei pelo "$self"

Isso facilita na hora de escolher o nome do arquivo em:

$self = "index.php"; //'Alias' para a página principal

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0
mas nessa última página acusa 3 imagens reais e 2 falsas completando o ciclo.

to aqui ainda analisando... mas de qualquer forma ficou muito bom!

Estranho, testei com a mesma configuração (12 imagens, 5 em cada página da galeria) e ficou tudo certinho...

Confere aí, se cada uma das imagens em 'thumbs' possui uma imagem correspondente em 'imagens', com o mesmo nome e mesma extensão. Acho que só isso justifica o erro.

Link para o comentário
Compartilhar em outros sites

  • 0
mas nessa última página acusa 3 imagens reais e 2 falsas completando o ciclo.

to aqui ainda analisando... mas de qualquer forma ficou muito bom!

Estranho, testei com a mesma configuração (12 imagens, 5 em cada página da galeria) e ficou tudo certinho...

Confere aí, se cada uma das imagens em 'thumbs' possui uma imagem correspondente em 'imagens', com o mesmo nome e mesma extensão. Acho que só isso justifica o erro.

Claro que sim não daria pra errar com apenas 12 imagens rsrs... mas já to até usando "valendo"!

E já coloquei pra rodar substituindo o antigo arquivo que funcionava muito bem, mas não tinha essa opção de passar as fotos. Agora ficou qse totalmente beleza.

Modifiquei algumas coisas pra adaptar melhor as minhas necessidades ... coloquei um link na própria foto aberta pra ela ir avançando às próximas... isso facilita nos celulares com touch screen...

Ficou muito bom... só mesmo esse detalhe ai das imagens sobrando vazias... mas vou vendo aqui se tem como acertar.

Se achar ai o erro me avisa, ok?

Abraços

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0
coloquei um link na própria foto aberta pra ela ir avançando às próximas... isso facilita nos celulares com touch screen...

verdade, mas faz a verificação em cada imagem pra checar se é a última da galeria... Se for, linka ela pra galeria, senão ao clicar vai pra um 'id' sem foto, imagem vazia.

Sobre o erro, aqui visualizando pelo PC eu não ví isso de imagens vazias...

Por exemplo, aqui, é a última página da galeria e não tem imagem vazia, ao meu ver

Vai ver o erro ocorre só pelo cel...

Link para o comentário
Compartilhar em outros sites

  • 0

Sobre o erro, aqui visualizando pelo PC eu não ví isso de imagens vazias...

Por exemplo, aqui, é a última página da galeria e não tem imagem vazia, ao meu ver

Vai ver o erro ocorre só pelo cel...

Esse erro já se apresentava antes de eu mexer em qualquer coisa.

Eu to vendo ela vazia pelo pc e no celular tb... abri no netbook e apresentou tb! Olha ai... aqui

Eu acho que tem alguma coisa a ver com ".jpg" ou algo assim... sei la

Tem alguma coisa nesse código que mostra o certo, mas como eu não tenho experiencia nisso levaria um século pra achar algo.

// LÊ DIRETÓRIO   // READS DIRECTORY
while(false!==($filename=readdir($dh))){
    if(substr($filename,-4)==".jpg"){
    $filearray[]=$filename;
    sort($filearray); //reverses the array: z->a. 10->01.
    }
}

// VARIÁVEIS NUMÉRICAS   // NUMERIC VARIABLES
$totfim=$pag*$imagens;
$inicio=$totfim-$imagens;
$total=count($filearray);
$totalpag=ceil($total/$imagens);
$ni2=ceil($imagens*$pag);

if($totfim>$total){
    $totfim=$total;
}

// INICIA LAYOUT DE TABELA   // BEGINS LAYOUT TABLE
echo "<table align='center' cellspacing='1' height='200' border='0' width='400'>";
echo "<tr><td height='1' bgcolor='#cccccc'></td></tr>";
echo "<tr><td height='150' align='center' bgcolor='#2b2a2b'>";
echo "<table border='0' cellspacing='2'><tr>";

// MOSTRA COLUNAS DE IMAGENS   // SHOW IMAGE COLUMNS
    $break=0;
for($i=$inicio;$i<$totfim;$i++){
    $imagem=$filearray[$i];
    $nome1=explode(".",$imagem);
    $nome=$nome1[0];

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0

Então acho que não entendi direito sobre este erro... nesta galeria que você passou, não achei imagem vazia

Essa parte do código original que tu postou basicamente percorre o diretorio de imagens, confere se a extensão da imagem é '.jpg', e se for, insere no array das imagens.

Após, calcula o total de páginas, e depois, constroi a tabela. No finalzinho, separa o nome da imagem da extensão.

Link para o comentário
Compartilhar em outros sites

  • 0

Ah, tá explicado. É que aqui uso o Firefox, e imagens quebradas não aparecem com esse ícone, característico do Chrome.

Corrigi o bug. Caso queira baixar novamente, clique aqui, ou simplesmente substitua essa parte do código-fonte:

for($i=$pag*$qpp-$qpp;$i<$pag*$qpp;$i++){
            echo "<td align='center' valign='baseline' bgcolor='#2b2a2b'>
            <table cellspacing='1'><tr><td valign='baseline'><a href='index.php?img=$i' target='_parent'><img src=".$diretorioThumbs.$arquivos[$i]." border=0 width=45></a>
            </td></tr></table>";
}
por essa:
$i=$pag*$qpp-$qpp;
        while($i<$pag*$qpp && $i<sizeof($arquivos)){
            echo "<td align='center' valign='baseline' bgcolor='#2b2a2b'>
            <table cellspacing='1'><tr><td valign='baseline'><a href='index.php?img=$i' target='_parent'><img src=".$diretorioThumbs.$arquivos[$i++]." border=0 width=45></a>
            </td></tr></table>";
}

Poste aí se funcionou.

Link para o comentário
Compartilhar em outros sites

  • 0
Poste aí se funcionou.

Muito interessante a modificação que fez... deu todo o sentido agora! Essa parte ficou perfeita! \o/

Só falta encontrarmos onde eu mexo pra freiar as fotos quando são clicadas direto na imagem, pois eu havia copiado de algo que você fez... do jeito que tá, se eu ficar clicando nelas acabam as fotos reais e vem as fotos vazias! ¬¬

Acrescentei esse comando antes do link.

$imgproxima = $img+1;
E modifiquei essa linha... repare que troquei o "index.php" por "$self". Dei uma varredura no código todo e sai trocando.
echo "<a href='$self?img=$imgproxima'><img src='". $diretorioImagens.$arquivos[$img] ."' border='0' height=130>
Ficou assim.
//Se estiver visualizando uma imagem
        echo "
        <HTML>
        <body>
        <table border=0 width=100% cellpadding='2' cellspacing='2'>
        <tr><td bgcolor='#2b2a2b' colspan=3><center>";
    $imgproxima = $img+1;
        echo "<a href='$self?img=$imgproxima'><img src='". $diretorioImagens.$arquivos[$img] ."' border='0' height=130></a><br>
        </td></tr>
        ";
    $imganterior = $img-1;
    $imgproxima = $img+1;
    if($imganterior>-1)

Desde já muito obrigado!

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0

Substitui essa parte do código:

echo "<HTML><body><table border=0 width=100% cellpadding='2' cellspacing='2'><tr><td bgcolor='#2b2a2b' colspan=3><center>";
    $imgproxima = $img+1;
echo "<a href='$self?img=$imgproxima'><img src='". $diretorioImagens.$arquivos[$img] ."' border='0' height=130</a><br></td></tr>
        ";
     $imganterior = $img-1;
     $imgproxima = $img+1;
Por essa:
echo "<HTML><body><table border=0 width=100% cellpadding='2' cellspacing='2'><tr><td bgcolor='#2b2a2b' colspan=3><center>";
     $imganterior = $img-1;
     $imgproxima = $img+1;
     if($imgproxima <sizeof($arquivos)) echo "<a href='".$self."?img=". $imgproxima ."'>";
     else echo "<a href='".$self."'>";
     echo "<img src='". $diretorioImagens.$arquivos[$img] ."' border='0' height=130></a><br></td></tr>";

Agora ele verifica se a imagem que está sendo exibida é a última. Se for, a imagem recebe o link pra voltar para a galeria, se não for, coloca o link pra próxima imagem.

Postae se funcionou..

Editado por mJi
Link para o comentário
Compartilhar em outros sites

  • 0
Agora ele verifica se a imagem que está sendo exibida é a última. Se for, a imagem recebe o link pra voltar para a galeria, se não for, coloca o link pra próxima imagem.

Postae se funcionou..

Muito bom mesmo! Fechou! \o/

Parabéns e muito obrigado!

Vou analisar agora melhor o que fizemos!

Abração!

Editado por André Monjardim
Link para o comentário
Compartilhar em outros sites

  • 0
Agora ele verifica se a imagem que está sendo exibida é a última. Se for, a imagem recebe o link pra voltar para a galeria, se não for, coloca o link pra próxima imagem.

Postae se funcionou..

Muito bom mesmo! Fechou! \o/

Parabéns e muito obrigado!

Vou analisar agora melhor o que fizemos!

Abração!

Qualquer coisa tamo ae

o/

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...