[Resolvido] Galeria de imagens com miniaturas

Morphy · Novembro 22, 2010

Olá pessoal, estou há vários dias lendo e procurando tutoriais onde eu possa criar ima galeria de imagens igual as do site do extra e mercados livre, onde ao clicar na imagem aparece ela no tamanho grande. Mas isso tem que ser vindo do banco de dados.

Posso está errado mas acho que a logica seria criar uma tabela com...

foto1

foto2

foto3

foto1p

foto2p

foto3p.

Mas na hora de chamar o link dessa foto miniatura para aparecer a grande, como eu faria isso, ou se alguém conhecer um tutorial que explique fico agradecido.

Leandro Chaves · Novembro 22, 2010

Morphy,

Para a exibição tente utilizar lightbox.

Quanto a tabela no banco, eu acho melhor criar uma tabela contendo os campos (idProduto,foto). Assim você pode adicionar uma quantia ilimitada de fotos para cada produto, isso facita, se vocẽ tiver que mudar a quantia de imagens por produto depois.

Morphy · Novembro 30, 2010

Leandro, é exatamente o que eu fiz depois que coloquei esse tópico, mas ta dando erro no meu codigo. Vou tentar aqui mais um pouco, se não conseguir amanha posto o codigo aqui. Na hora que clico em verproduto.php=id, vem o produto, mas vem com os dois produtos cadastrados no banco de dados, ou seja ele lista as fotos do produto id 01 e id 02.

Olá pessoal, estou tentando a dias já fazer essa galeria funcionar mas não to conseguindo.

Segue meu codigo da pagina verProdutos.php

<?php
include ("../conexao/config.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>Biah Baby - Confecções e Enxovais</title>
<link rel="stylesheet" type="text/css" href="../css/estilos.css" />
<link rel="stylesheet" href="../css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>

<body>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td><?php include ("topo.php");?></td>
 </tr>
</table>
<div id="tudo">
 <div id="content-middle">
<table width="945" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td align="left" valign="top"><br /></td>
 </tr>
 <tr>
   <td align="center" valign="top">
   <table width="940" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
       <td align="left" valign="top">

<table width="930" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td width="216" align="left" valign="top"><?php include("lateral_atendimento_andradas.php");?></td>
   <td width="31" align="center" valign="top"> </td>
   <td width="693" align="center" valign="top"><br />
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td><?php include ("menu_categorias_principal.php"); ?></td>
 </tr>
</table>
   <?php
   $id = $_GET['idProduto'];
$sql = mysql_query ("SELECT * FROM produtos");


while ($linha = mysql_fetch_array($sql)){
$categoria		= $linha ['categoria'];
$titulo			=$linha['titulo'];
$resumo			= $linha ['resumo'];
$descricao		= $linha['descricao'];
$ref			= $linha['ref'];
$destaque		= $linha ['destaque'];
$legenda		= $linha ['legenda'];
$foto01g		= $linha ['foto01g'];
$foto02g		= $linha ['foto02g'];
$foto03g		= $linha ['foto03g'];
$foto04g		= $linha ['foto04g'];
$foto05g		= $linha ['foto05g'];
$foto01p		= $linha ['foto01p'];
$foto02p		= $linha ['foto02p'];
$foto03p		= $linha ['foto03p'];
$foto04p		= $linha ['foto04p'];
$foto05p		= $linha ['foto05p'];
?>
   <br />
   <table width="582" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td align="left" valign="top"><div id="especificacoes"><? echo $titulo ?></div></td>
     </tr>
     <tr>
       <td align="left" valign="top"><div id="br_sessoes"><strong><a href="javascript:history.back(1)"><? echo $categoria ?></a></strong></div></td>
     </tr>
   </table>
   <br />
   <table width="583" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td align="center" valign="middle" class="texto_destaques"><?php echo "<img src='../admin/fotos_novas/".$foto01g."' alt='Foto de exibição' border=0 /><br/>";?></td>
       </tr>
     <tr>
       <td align="center" valign="middle">

       <!--Inicia o lightbox-->
       <a href="../admin/fotos_novas/<?=$linha['foto01g']?>" rel="lightbox[roadtrip]" title="<?=$linha['legenda']?>"><br />
       <img src="../admin/fotos_novas/<?=$linha['foto01p']?>" alt="" width="85" border="0" class="img_pq" /></a>
        
       <a href="../admin/fotos_novas/<?=$linha['foto02g']?>" rel="lightbox[roadtrip]" title="<?=$linha['legenda']?>"><img src="../admin/fotos_novas/<?=$linha['foto02p']?>" alt="" width="85" border="0" class="img_pq" /></a>
         
       <a href="../admin/fotos_novas/<?=$linha['foto03g']?>" rel="lightbox[roadtrip]" title="<?=$linha['legenda']?>"><img src="../admin/fotos_novas/<?=$linha['foto03p']?>" alt="" width="85" border="0" class="img_pq" /></a> 
        
       <a href="../admin/fotos_novas/<?=$linha['foto04g']?>" rel="lightbox[roadtrip]" title="<?=$linha['legenda']?>"><img src="../admin/fotos_novas/<?=$linha['foto04p']?>" alt="" width="85" border="0" class="img_pq" /></a>
        
       <a href="../admin/fotos_novas/<?=$linha['foto05g']?>" rel="lightbox[roadtrip]" title="<?=$linha['legenda']?>"><img src="../admin/fotos_novas/<?=$linha['foto05p']?>" alt="" width="85" border="0" class="img_pq" /></a>
       </td>  
       <!--termina o lightbox-->
     </tr>
   </table>
   <br />
   <table width="582" border="0" align="center" cellpadding="0" cellspacing="0">
       <tr>
         <td align="left" valign="top">
         <br>
         <fieldset>
         <table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
       <tr>
                 <td colspan="3" align="left" valign="top"><h2>Descrição do produto</h2></td>
               </tr>
               <tr>
                 <td align="left" valign="top"> </td>
                 <td align="left" valign="top"> </td>
                 <td align="left" valign="top"> </td>
               </tr>
               <tr>
                 <td colspan="3" align="left" valign="top" class="texto"><?php echo $descricao ?>
                   <br />
                   <br />Referência: <? echo $ref ?></td>
               </tr>
               <tr>
                 <td align="left" valign="top"> </td>
                 <td align="left" valign="top"> </td>
                 <td align="left" valign="top"> </td>
               </tr>
               <tr>
                 <td colspan="3" align="left" valign="top"><table width="130" border="0" align="right" cellpadding="0" cellspacing="0">
                   <tr>
                     <td width="84" align="right" valign="middle"><a href="javascript:history.back(1)"><img src="imgs/voltar.png" width="17" border="0" /></a></td>
                     <td width="10" align="right" valign="middle"> </td>
                     <td width="36" align="right" valign="middle" class="texto"><a href="javascript:history.back(1)">Voltar</a></td>
                   </tr>
                 </table></td>
             </tr>
             </table></fieldset></td>

       </tr>

     </table>
     <?php } ?>
   <br></td>
 </tr>
</table>
       </td>
       </tr>
   </table></td>
 </tr>
 <tr>
   <td align="left" valign="top"><?php include ("../footer.php");?></td>
 </tr>
</table>
</div>
<div id="content-bottom"></div>
</div>
</body>
</html>

No banco de dados criei uma tabela assim

`idProduto` int(11) NOT NULL AUTO_INCREMENT,
 `categoria` char(100) NOT NULL,
 `titulo` varchar(255) NOT NULL,
 `resumo` varchar(255) NOT NULL,
 `descricao` text NOT NULL,
 `ref` char(50) NOT NULL,
 `destaque` char(20) NOT NULL,
 `legenda` varchar(255) NOT NULL,
 `foto01g` varchar(255) NOT NULL,
 `foto02g` varchar(255) NOT NULL,
 `foto03g` varchar(255) NOT NULL,
 `foto04g` varchar(255) NOT NULL,
 `foto05g` varchar(255) NOT NULL,
 `foto01p` varchar(255) NOT NULL DEFAULT '',
 `foto02p` varchar(255) NOT NULL DEFAULT '',
 `foto03p` varchar(255) NOT NULL DEFAULT '',
 `foto04p` varchar(255) NOT NULL DEFAULT '',
 `foto05p` varchar(255) NOT NULL DEFAULT '',
 PRIMARY KEY (`idProduto`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

Só que, quando clico no botão ver detalhes para listar as fotos, ele passa o idProduto direitinho, mas lista todos os produtos cadastrados no banco de dados, na mesma página.

Alguém poderia me dar uma força, me indicar onde está o erro.

Pessoal alguém tem alguma idéia do que está acontecendo no meu código, pois não to conseguindo resolver. Ta aparecendo os registros todos cadastrados no bd, quando clico nos detalhes do produto.

William Bruno · Novembro 30, 2010

troque:

$id = $_GET['idProduto'];
        $sql = mysql_query ("SELECT * FROM produtos");

por algo como:

$id = (int)$_GET['idProduto'];
        $sql = mysql_query ("SELECT * FROM produtos WHERE idProduto = $id");

se não, não faz o menor sentido...

Bruno Augusto · Novembro 30, 2010

Posso dar uma sugestão de estudo? Veja o segundo Desafio PHP que foi justamente esse o tema: uma Galeria de Imagens

Morphy · Novembro 30, 2010

Meus Camaradas Willian Bruno e Bruno Augusto, obrigado pela dica, aquele (int) ali foi a martelada no lugar certo, muito obrigado mesmo, e podem ter certeza que vou estudar a aula indicada. Só mais uma coisa poderia me explicar o que é aquele int antes do GET, somente para que eu saiba.

Abraços e tópico resolvido.

William Bruno · Novembro 30, 2010

a 'martelada' foi o WHERE

o int, foi apenas para garantir um 'casting'

se o $_GET chegar vazio, o (int), vai jogar um 0, assim evitando que a query falhe.

Entrar

Arquivado

[Resolvido] Galeria de imagens com miniaturas

Recommended Posts

Morphy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Chaves 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morphy 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

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morphy 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

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante