Ir para conteúdo

POWERED BY:

Arquivado

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

Everton Vilela

Galeria abrir a imagen na div ?

Por , em Javascript

Recommended Posts

Everton Vilela    1

Everton Vilela
Postado

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

 

Minha duvida é um pouco doida, aliás de quem fugiu um pouco das aulas de javascript.

 

Eu estou montando uma nova galeria de imagens, as fotos elas são carregadas de um diretório

de imagens com paginação em php e essas fotos ao clicar nelas eu queria que abrisse dentro da "div"

que está instanciada com a id="foto" sem ter que usar nenhum iframe na pagina.

 

No passado no curso eu montei, mais faz maior tempão um sisteminha parecido com esses

codigos abaixo criando uma função permutação para exibir a imagen dentro da id visualizacao, mais não usava o php ainda, eram poucas imagens, e você tinha que estipulando o numero no final de cada uma.

 

O codigo era assim.

<script language="JavaScript">function permutacao(qual){	var imagem = new Image();	imagem.src="imagens/foto"+qual+".jpg";	parent.document.visualizacao.src=imagem.src;}</script>

onClick na imagem ficava assim:

<img src="imagens/miniaturas/foto2.jpg" width="60" height="45" onClick="permutacao(2)">

 

 

?

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif se alguém souber algo referente me ajuda ...

 

:unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Teste ai:

 

function exibir(img){	document.getElementById("exibe").src="imagens/foto"+img+".jpg";}<img src="imagens/miniaturas/foto2.jpg" width="60" height="45" onclick="exibir(2);"><div><img src="imagens/foto1.jpg" id="exibe"></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Everton Vilela    1

Everton Vilela
Postado

Não deu certo

 

Vou mostrar o codigo para ficar mais facil

 

Eu recebo os dados via php de um diretorio

a variavel $filenames carrega o local das imagens

 

como iria especificar isso no javascript ? ;/

 

 

 

Index.php

 

<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css"></head><body><div id="galeria">  <div id="top"></div>  <div id="submenu">  Galeria de imagens </div>   <div id="conteudo">	 <div id="esq">	   <div>		 <div align="center">  <? include("site.php")?>		 </div>	   </div>	 </div>	 <div id="dir">	   <div id="foto"></div>	 </div>   </div></div></body></html>

 

 

Essa tag fica dentro da div dir(direita) do codigo da pagina index.php, é nela onde estou tentando

fazer com q a foto apareça dentro dessa div.

<div id="foto"></div>

 

fotos.php ->

aqui eu listo as fotos direto do diretorio, e faço uma paginação, a intenção é eu clicar em uma

das fotos e elas aparecerem dentro da div foto.

é o que não estou conseguindo.

 

<?phpdefine("EOL", "\n");$pagina	= 10; // Define a Quantidade de fotos por pagina$dir	   = './imagens/';$filenames = glob("$dir/{*.jpg,*.JPG,*.gif}", GLOB_BRACE);$count	 = count($filenames);print '<table border="0" cellpadding="2" cellspacing="0" width="184">' . EOL;if ($count > 0) {$pages = ceil($count/$pagina);$pager = (isset($_GET["page"]) && is_numeric($_GET["page"])) ? $_GET["page"] : 0;$start = ($pager * $pagina);$endes = ($start + $pagina);$endes = ($endes > $count) ? $count : $endes;for ($i = $start; $i < $endes; $i++) {  if (($i + 1) & 1) { print ' <tr>' . EOL; }  print '<td><img border="0" src="' . $filenames[$i] . '" width="80"></td>' . EOL;  if ($i & 1 || ($i + 1) == $count) { print '  </tr>' . EOL; }}$page_file = "";for ($i = 0; $i < $pages; $i++) { $page_file .= '<a href="?page=' . $i . '">' . ($i + 1) . '</a> '; }print '<tr><td colspan="2">' . $page_file . '</td></tr>';} else {echo '<tr><td>Não existem imagens :P</td></td>';}print '</table>';?>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Sim mas dentro da div de id foto você deve colocar um elemento img:

 

<div id="foto"><img src="imagens/foto1.jpg" id="exibe"></div>

Definindo a primeira imagem da galeria, passe esse endereço com o php. ex.: <img src="<?php echo $endereço ?>" id="exibe">

 

nas imagens da galeria vai fazer assim:

 

<img src="imagens/miniaturas/foto2.jpg" width="60" height="45" onclick="exibir(2);">

 

e a função javascript pra trocar as imagens é a que eu postei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Everton Vilela    1

Everton Vilela
Postado

O codigo seu não funcionou assim da maneira que eu queria,

 

na galeria de fotos, eu to listando um diretório de imagens (listando a pasta imagens e fazendo uma paginação exibindo todas as imagens daquela pasta)

 

Cada foto dentro da pasta imagens tem um nome diferente por exemplo: DSC1006.jpg , DSC1007.jpg

 

Então se eu usar esse codigo: onclick="exibir(2);" a foto teria que se chamar foto2.jpg por causa do codigo acima la na pagina index ser assim:

 

document.getElementById("exibe").src="imagens/foto"+img+".jpg";

Sò que ai ele exibe si eu renomear a foto DSC1006.jpg para foto2.jpg, mais ele só vai exibir a foto2.jpg por causa

do onclick="exibir(2);"

 

se fosse para exibir a foto1 entao do onclick="exibir(1);" e assim por diante com as demais, ele exibiria, mais eu teria que ter fotos fixas e não puxadas por meio de uma paginação.

 

porque pela paginação só tenhu uma linha para alterar:

<td><img border="0" src="' . $filenames[$i] . '" width="80" onclick="exibir(2);"></td>

 

 

Na galeria de imagens esse onclick="exibir(2);" queria que fosse automático, porque não tem como eu definir o exibir(1), exibir(2), exbir(3) em cada linha que irá aparecer as fotos. apenas em uma.

 

;/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Everton Vilela    1

Everton Vilela
Postado

Consegui resolver o probleminha seguindo uma pesquisa

ai que achei na net.

 

o problema era aquela paginação minha q tava com pau para exibir corretamente.

 

ai usei o innerHTML + a paginação abaixo. tive um resultado que queria

criar a paginação e exibir as fotos por meio do javascript em outra div.

 

codigo

<?$pag = $_GET['pag'] ? $pag : 1;$rpp = 3;$inicio = $pag * $rpp - $rpp;$dir = ("./imagens");$abrir = opendir($dir);$arquivos = array();while (false !== ($file = readdir($abrir))) {if ($file <> "." && $file <> "..") {if (!is_dir($file)){ $arquivos[] = $file;}}}$total = count($arquivos);$paginas = ceil ($total/$rpp);echo ("<table cellpadding='5' cellspacing='5' border='0'>");for ($i = $inicio; $i < $inicio+$rpp && $i < $total; $i++){ if($i%3==0) {   if (substr("$dir/$arquivos[$i]", -4) == ".jpg")    { 	 echo ("</tr><tr><td><a href=\"#\" onClick=\"abre('$dir/$arquivos[$i]')\"><img src='$dir/$arquivos[$i]' width='80' height='60'></a></td>");   } } else {   if (substr("$dir/$arquivos[$i]", -4) == ".jpg")    {    echo "<td><a href=\"#\" onClick=\"abre('$dir/$arquivos[$i]')\"><img src='$dir/$arquivos[$i]' width='80' height='60'></a></td>";   } }}echo ("</table>");if ($pag > 1) {$ant = $pag - 1;echo "< <a href=\"".$PHP_SELF."?pag=".$ant."\">Anterior</a> ";}echo "| <em>Página <b>".$pag."</b> </em> | ";if ($pag < $paginas) {$pro = $pag + 1;echo "<a href=\"".$PHP_SELF."?pag=".$pro."\">Próxima</a> > ";}?><script language="JavaScript">function abre(imagem) {document.getElementById("fotos").innerHTML="<img src='"+ imagem +"'>";}</script><div id="fotos"></div>

mais agora vou implementar aqui ....

colocar as colunas de pé e exibir apenas 2 por coluna. mais facil.

Compartilhar este post

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

Informação importante

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

  Aceito