[Resolvido] Abrindo imagem na mesma página

Leozin · Julho 15, 2011

Gostaria de saber se tem jeito de mostrar os dados do BD em html?

só tenho em php, só que na hora q eu clico para fazer o iframe(tirar os produtos e aparecer só a imagem almentada) nao acontece nada,

segue o codigo:

echo "<a href='#' onclick='javascript:troca('painel/grande/".$produtos->grande."', 'meio')'><img src='painel/fotos/".$produtos->foto."' alt='Foto de exibição' border='0'/><br />";

esse é uma modificacao o original é assim:

<a href="#" onclick="javascript:troca('fitaadesiva.php', 'meio')">Fita adesiva</a>

Se alguem tiver algum codigo proto poderia postar por favor?

agradeço desde já.....

William Bruno · Julho 15, 2011

erro de sintaxe html:

echo '<a href="#" onclick="javascript:troca(\'painel/grande/'.$produtos->grande.'\', \'meio\')">
     <img src="painel/fotos/'.$produtos->foto.'" alt="Foto de exibição" border="0" /></a><br />';

jcalebe · Julho 15, 2011

Substitua por isso:

echo '<a href="#" onclick="javascript:troca(\'painel/grande/'.$produtos->grande.'\', \'meio\')"><img src="painel/fotos/'.$produtos->foto.'" alt="Foto de exibição" border="0"/><br />';

problema com aspas duplas e simples. ^_^

Leozin · Julho 15, 2011

Fiz a alteracao, acontece o iframe, só que nao aparece a imagem aparece uns negocio assim:

JFIF``C $.' ",#(7),01444'9=82<.342C 2!!22222222222222222222222222222222222222222222222222Sn" }!1AQa"q2#BR$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz w!1AQaq"2B #3Rbr $4%

o que esta acontecendo? vou postar todo codigo:

Dados

jcalebe · Julho 15, 2011

Isso tem cara de falta de header.

Esta imagem é estática (.jpg, .gif, .png) ou dinâmica (.php)?

Se for em PHP, coloque este header na primeira linha do arquivo .php que forma a imagem dinâmica:

//Use esse para qualquer tipo de imagem gerada
header("Content-Type: application");

//Use esse para imagens geradas como JPG
header("Content-Type: image/jpg");

//Use esse para imagens geradas como PNG
header("Content-Type: image/png");

//Use esse para imagens geradas como GIF
header("Content-Type: image/gif");

Lembrando que basta usar apenas um dos headers acima, exceto o caso de você ter uma condicional como IF ou um Switch.

Leozin · Julho 15, 2011

Meu codigo esta assim:

onde devo colocar o header? são imagens JPEG estao dentro da pasta painel/grande.

<!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>Sul Franca</title>
<meta name="keywords" content="Sul Brasil, melhores componentes" />
<meta name="description" content="Sul Brasil, melhores componentes" />
<link href="style.css" rel="stylesheet" type="text/css" />
<?php include "head.php"; ?>
<?php include "painel/conexao.php";?>
<script type="text/javascript">
// JavaScript Document
startList = function() {
       if (document.all&&document.getElementById) {
               navRoot = document.getElementById("nav");
               for (i=0; i<navRoot.childNodes.length; i++) {
                       node = navRoot.childNodes[i];
                       if (node.nodeName=="LI") {
                               node.onmouseover=function() {
                                       this.className+=" over";
                               }
                               node.onmouseout=function() {
                                       this.className=this.className.replace(" over", "");
                               }
                       }
               }
       }
}
window.onload=startList;
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
} 
function troca(pagina, dives) {
http.open("GET", pagina, true);
http.onreadystatechange=function() {
   if(http.readyState == 4) {
     document.getElementById(dives).innerHTML = http.responseText;
   }
 }
http.send(null);
}
</script>
<script language="javascript" type="text/javascript">
function clearText(field)
{
   if (field.defaultValue == field.value) field.value = '';
   else if (field.value == '') field.value = field.defaultValue;
}
</script>
<script language="javascript" type="text/javascript">
function clearText(field)
{
   if (field.defaultValue == field.value) field.value = '';
   else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body>

</div>
<div id="templatemo_main">

       <div id="meio">
       <table cellpadding="0" cellspacing="0" width="110px" height="100%" border="0">
<?php

// Seleciona todos os produtos
$sql = mysql_query("SELECT * FROM produtos ORDER BY nome");
// Exibe as informações de cada produto
while ($produtos = mysql_fetch_object($sql)) {
if ($produtos->setor==arqueacao){
if($coluna == ''){
       echo '<tr>';
       }

       if($coluna == '5'){
       echo "<tr>";
       $coluna = 0;            
       }
?> 
<td align="center" valign="left" width="110px" style='border:0px;color:#FFF;'>
<?php

// Exibimos a miniaturaecho "<a href='painel/grande/".$produtos->grande."' target='_top'><img src='painel/fotos/".$produtos->foto."' alt='Foto grande' /></a></br>";
//<a href="#" onclick="javascript:troca('arqueacao.php', 'meio')">Arqueação</a>
echo '<a href="#" onclick="javascript:troca(\'painel/grande/'.$produtos->grande.'\', \'meio\')"><img src="painel/fotos/'.$produtos->foto.'" alt="Foto de exibição" border="0"/><br />';

//<painel/grande/".$produtos->grande." onclick="javascript:troca('arqueacao.php', 'meio')">

echo "</br>";
// Exibimos nome
?><a style='color:#000;font:Georgia, 'Times New Roman', Times, serif;font-size:14px;outline:none;' <?php echo "<a href='painel/grande/".$produtos->grande."'>" ?> 

<?php 
echo $produtos->nome . "<br />";

?></a><br>

<?php
if($coluna == '5'){
       echo "</tr>";   
       }
       $coluna++;

}
}

?>


</table> 
       </div>
 <?php include "menu.php"; ?>    
 </div>

<div class="cleaner"></div>

<?php include "rodape.php"; ?>    

</div>

</body>
</html>

Agradeço.......

Leozin · Julho 16, 2011

Ao clicar na miniatura não esta aparecendo a imagem grande, esta aparecendo isso:

JFIF``C $.' ",#(7),01444'9=82<.342C 2!!22222222222222222222222222222222222222222222222222Sn" }!1AQa"q2#BR$3br %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz w!1AQaq"2B #3Rbr $4%

O codigo é:

<?php

// Seleciona todos os produtos
$sql = mysql_query("SELECT * FROM produtos ORDER BY nome");
// Exibe as informações de cada produto
while ($produtos = mysql_fetch_object($sql)) {
if ($produtos->setor==arqueacao){
if($coluna == ''){
       echo '<tr>';
       }

       if($coluna == '5'){
       echo "<tr>";
       $coluna = 0;            
       }
?> 
<td align="center" valign="left" width="110px" style='border:0px;color:#FFF;'>
<?php
// Exibimos a miniaturaecho "<a href='painel/grande/".$produtos->grande."' target='_top'><img src='painel/fotos/".$produtos->foto."' alt='Foto grande' /></a></br>";
//<a href="#" onclick="javascript:troca('arqueacao.php', 'meio')">Arqueação</a>
echo '<a href="#" onclick="javascript:troca(\'painel/grande/'.$produtos->grande.'\', \'meio\')"><img src="painel/fotos/'.$produtos->foto.'" alt="Foto de exibição" border="0"/></a><br />';

//<painel/grande/".$produtos->grande." onclick="javascript:troca('arqueacao.php', 'meio')">

echo "</br>";
// Exibimos nome
?><a style='color:#000;font:Georgia, 'Times New Roman', Times, serif;font-size:14px;outline:none;' <?php echo "<a href='painel/grande/".$produtos->grande."'>" ?> 

<?php 
echo $produtos->nome . "<br />";

?></a><br>

<?php
if($coluna == '5'){
       echo "</tr>";   
       }
       $coluna++;

}
}

?>

O que esta acontecendo? me ajudem...

Obrigado

William Bruno · Julho 16, 2011

oque a função troca() faz ?

você poderia ter continuado no outro tópico, ficar criando diversos tópicos para a mesma dúvida, apenas atrapalha a organização do fórum.

Leozin · Julho 16, 2011

Aqui esta a função troca();

<script type="text/javascript">
// JavaScript Document
startList = function() {
       if (document.all&&document.getElementById) {
               navRoot = document.getElementById("nav");
               for (i=0; i<navRoot.childNodes.length; i++) {
                       node = navRoot.childNodes[i];
                       if (node.nodeName=="LI") {
                               node.onmouseover=function() {
                                       this.className+=" over";
                               }
                               node.onmouseout=function() {
                                       this.className=this.className.replace(" over", "");
                               }
                       }
               }
       }
}
window.onload=startList;
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
} 
function troca(pagina, dives) {
http.open("GET", pagina, true);
http.onreadystatechange=function() {
   if(http.readyState == 4) {
     document.getElementById(dives).innerHTML = http.responseText;
   }
 }
http.send(null);
}
</script>

William Bruno · Julho 16, 2011

e pra que isso ?

você tá trazendo uma imagem com ajax. Não precisa ser assim. Que tal:

echo '<a href="#" onclick="javascript:troca_img(\'painel/grande/'.$produtos->grande.'\', \'meio\')"><img src="painel/fotos/'.$produtos->foto.'" alt="Foto de exibição" border="0"/></a><br />';

e a função troca_img()

function troca_img( img_src, img_where ){
  document.getElementById( img_where ).innerHTML = '<img src="'+img_src+'" alt="" />';
}

sendo:

<div id="meio"></div>

entendeu oque fiz ?

caso não tenha entendido, não use códigos que você não sabe oque faz.

Só estará arranjando outro problema. Eu vi o tópico onde te sugeriram ajax. Não era preciso para algo tão simples, e te levou a ter uma dúvida cabulosa.

Leozin · Julho 16, 2011

Valeu William Deus te abencoe....

Só que agora vou tentar fazer uma galeria com as imagem grandes,

ou seja tera mais de uma imagem, se você tiver algum codigo ou algo

parecido poderia posta-lo?

Mesmo assim te agradeço....

William Bruno · Julho 16, 2011

se você tiver algum codigo ou algo
parecido poderia posta-lo?

não tenho cara, e te sugiro estudar.

Era algo simples de fazer, e por um erro de questionamento, você acabou se deparando com um problema maior que o inicial.

Tipo, tira um tempo pra estudar. Troca a pesquisa de algo pronto, por um tutorial básico de javascript.

Arquivado

[Resolvido] Abrindo imagem na mesma página

Recommended Posts

Leozin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jcalebe 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leozin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jcalebe 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leozin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leozin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leozin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leozin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante