Fancybox puxando de um banco de dados

Toscomics · Maio 4, 2011

Olá

Estou administrando um site que foi criado na plataforma ASP.

Este site possui um banco de dados (para fins imobiliarios) que busca imagens de uma pasta especifica na exibição dos imoveis.

Um arquivo chamado dados_view.html é quem comanda a visualização dos imoveis.

Minha duvida é a seguinte. Quero que estas imagens sejam exibidas com o recurso fancybox, porém como fazer isso uma vez que as imagens são buscadas do banco de dados? No dados_view.html as imagens ficam em tabelas e são chamadas pelo valor {$foto1_value}, {$foto2_value} e assim por diante.

Podem me dar uma ajuda?

Segue o codigo todo da pagina (o codigo esta com inserções de testes do fancybox):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Dados</TITLE>
<link REL="stylesheet" href="include/style.css" type="text/css"><!--[if IE]><link REL="stylesheet" href="include/styleIE.css" type="text/css"><![endif]-->
<STYLE>
#center_block{$id} {width:45%;margin:0 auto;}
#contents_block{$id} {text-align:center;}
#header_block{$id} {white-space:nowrap;height:31px;padding:5px;text-align:center;}
#fields_block{$id} {width:100%}
#buttons_block{$id} {padding:5px;white-space:nowrap;text-align:center;}
#required_block{$id} {text-align:left;padding:5px}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.7600.16385"><LINK rel=stylesheet 
type=text/css href="main.css">
<link href="file:///C|/INTERATIVAMIX/PROJETOS/TECLANDO IMOVEIS/main.css" rel="stylesheet" type="text/css">
</HEAD>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<BODY>




<script type="text/javascript" src="jquery.min.js"></script>
<script>
	!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
	$(document).ready(function() {
		/*
		*   Examples - images
		*/

		$("a#example1").fancybox();

		$("a#example2").fancybox({
			'overlayShow'	: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});

		$("a#example3").fancybox({
			'transitionIn'	: 'none',
			'transitionOut'	: 'none'	
		});

		$("a#example4").fancybox({
			'opacity'		: true,
			'overlayShow'	: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'none'
		});

		$("a#example5").fancybox();

		$("a#example6").fancybox({
			'titlePosition'		: 'outside',
			'overlayColor'		: '#000',
			'overlayOpacity'	: 0.9
		});

		$("a#example7").fancybox({
			'titlePosition'	: 'inside'
		});

		$("a#example8").fancybox({
			'titlePosition'	: 'over'
		});

		$("a[rel=example_group]").fancybox({
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'titlePosition' 	: 'over',
			'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
				return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
			}
		});

		/*
		*   Examples - various
		*/

		$("#various1").fancybox({
			'titlePosition'		: 'inside',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		});

		$("#various2").fancybox();

		$("#various3").fancybox({
			'width'				: '75%',
			'height'			: '75%',
			'autoScale'			: false,
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'type'				: 'iframe'
		});

		$("#various4").fancybox({
			'padding'			: 0,
			'autoScale'			: false,
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		});
	});
</script>



{$header} <BR><BR><BR>
{BEGIN body}<DIV>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
 <TBODY>
   <TR>
     <TD class=texto_SEGOE_VERMELHO 
align=middle>Dados do Imóvel</TD>
   </TR>
 </TBODY>
</TABLE>
<br>
<br>
<TABLE class=table_tracej border=0 cellSpacing=2 cellPadding=5 width="100%">
 <TBODY>
 <TR>
   <TD width=165 rowSpan=4 align=middle vAlign=top>
     <TABLE class=table_bordaFOTO border=0 cellSpacing=0 cellPadding=0 
     width="10%" align=center>
       <TBODY>
       <TR>
         <TD align=middle>{$foto1_value}</TD></TR></TBODY></TABLE></TD>
   <TD width=881 bgColor=#f0f0f0 class=texto_normalTREBUCHETMS_GDE>{$Tipo_negocio_value} • {$Tipo_imovel_value} • {$Tipo_imovel2_value} </TD></TR>
 <TR>
   <TD class=texto_SEGOE>{$Cidade_value} - {$Bairro_value}</TD></TR>
 <TR>
   <TD bgColor=#f0f0f0 class=texto_SEGOE_VERMELHO><strong>Valor de {$Tipo_negocio_value}: </strong>R$ {$valor_imovel_value}</TD></TR>
 <TR>
   <TD class=texto_SEGOE><strong>Dormitórios:</strong> {$dormitorios_value}</TD></TR>
 <TR>
   <TD colspan="2" align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Suíte:</strong> {$suite_value}</TD>
   </TR>
 <TR>
   <TD colspan="2" align=left vAlign=top class=texto_SEGOE><strong>Vagas:</strong> {$garagem_coberta_value}</TD>
   </TR>
 <TR>
   <TD colspan="2" align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Área Útil: </strong>{$area_terreno_value} m²</TD>
   </TR>
 <TR>
   <TD colspan="2" align=left vAlign=top class=texto_SEGOE><strong>Área Total:</strong> {$area_construida_value} m²</TD>
   </TR>
 <TR>
   <TD colspan="2" align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><span class="texto_normalTREBUCHETMS_GDE"><strong>Dados do Anunciante:</strong></span><strong><br>
     <br>
   </strong>{$Observacoes1_value}</TD>
   </TR>
 <TR>
   <TD vAlign=top width=165 align=middle> </TD>
   <TD> </TD></TR></TBODY></TABLE>
<br>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
 <TBODY>
   <TR>
     <TD class=texto_SEGOE_VERMELHO 
align=middle>Descrição do imóvel</TD>
   </TR>
 </TBODY>
</TABLE>
<br>
<TABLE class=table_tracej border=0 cellSpacing=2 cellPadding=5 width="100%">
 <TBODY>
   <TR>
     <TD width="50%" align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Sala de Jantar:</strong> {$sala_jantar_value}</TD>
     <TD width="50%" align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Área de Serviço: </strong>{$area_servico_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Sala de Estar: </strong>{$sala_estar_value}</TD>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Quarto de Empregados:</strong> {$dep_empregados_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Escritório:</strong> {$escritorio_value}</TD>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Quintal:</strong> {$quintal_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Varanda:</strong> {$varanda_value}</TD>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Garagem coberta: </strong>{$garagem_coberta_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Lavabo:</strong> {$lavabo_value}</TD>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Garagem descoberta: </strong>{$garagem_descoberta_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Copa: </strong>{$copa_value}</TD>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Armários de cozinha:</strong> {$armarios_cozinha_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><span class="texto_SEGOE"><strong>Cozinha:</strong> {$cozinha_value}</span></TD>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><span class="texto_SEGOE"><strong>Armários Embutidos:</strong> {$armarios_embutidos_value}</span></TD>
     </TR>
   <TR>
     <TD align=middle vAlign=top> </TD>
     <TD align=middle vAlign=top> </TD>
     </TR>
   <TR>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Churrasqueira: </strong>{$churrasqueira_value}</TD>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Piscina: </strong>{$piscina_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Portão elétrico: </strong>{$portao_eletronico_value}</TD>
     <TD align=left vAlign=top class=texto_SEGOE><strong>Ar condicionado: </strong>{$ar_condicionado_value}</TD>
     </TR>
   <TR>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Alarme: </strong>{$sistema_alarme_value}</TD>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Padrão de Construção: </strong>{$padrao_construcao_value}</TD>
   </TR>
   <TR>
     <TD align=left vAlign=top class=texto_SEGOE> </TD>
     <TD align=middle vAlign=top> </TD>
   </TR>
   <TR>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Valor de Condomínio:</strong> R$ {$valor_condominio_value}</TD>
     <TD align=left vAlign=top bgcolor="#F0F0F0" class=texto_SEGOE><strong>Aluguel: </strong>R$ {$aluguel_value}</TD>
   </TR>
 </TBODY>
</TABLE>
<BR><BR>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
 <TBODY>
 <TR>
   <TD class=texto_SEGOE_VERMELHO 
align=middle>Fotos</TD></TR></TBODY></TABLE><BR><BR>
<TABLE class=table_bordaFOTO border=0 cellSpacing=0 cellPadding=0 width="80%" 
align=center>
 <TBODY>
 <TR>




   <TD align=middle> {$foto2_value}</TD>
   <TD align=middle> {$foto3_value}</TD>
   <TD align=middle> {$foto4_value}</TD></TR>
 <TR>
   <TD align=middle> {$foto5_value}</TD>
   <TD align=middle> {$foto6_value}</TD>
   <TD align=middle> {$foto7_value}</TD></TR>
 <TR>
   <TD colSpan=3 align=middle> {$foto8_value}<br></TD></TR></TBODY></TABLE><BR><BR><BR><INPUT class=button onClick="window.location.href='dados_list.asp?a=return'" value="Voltar à Lista" type=reset></DIV>{END body}{$footer} </BODY></HTML>

xanburzum · Maio 5, 2011

olha este link

Toscomics · Maio 5, 2011

olha este link

Desculpe mas este link não esclarece como proceder.

Meu problema esta em como linkar a imagem ao fancybox, lembrando que não é uma imagem especifica e sim uma variavel que puxa as imagens de uma pasta no banco.

xanburzum · Maio 5, 2011

como você esta recuperando o path das imagens

Toscomics · Maio 5, 2011

Então, as imagens

estão sendo buscadas por estes comandos

$foto2_value

Dentro de cada tabela, ficando assim.

<TD align=middle> {$foto2_value}</TD>

<TD align=middle> {$foto3_value}</TD>

<TD align=middle> {$foto4_value}</TD></TR>

<TR>

<TD align=middle> {$foto5_value}</TD>

<TD align=middle> {$foto6_value}</TD>

Este arquivo que chama as imagens que estão no diretorio http://meusite.com.br/files

O código fica numa pasta em um diretorio diferente http://meusite.com.br/dados_view

Desculpe se está confuso, não fui eu quem programou, tenho só uma leve noção de programação e agora estou com a bomba na mão.

Sequiser entender melhor veja este site:

http://teclandoimoveis.com.br/imoveis/buscador/buscador/dados_view.asp?editid1=378

Note que na parte inferior estão as fotos do imóvel, estas é que estou tentando fazer exibir em fancybox ou de um outro modo que fique mais bonito, pois abrir em uma nova página esta ruim.

Obrigado pela atenção até agora.

Abraços

saloeric · Maio 10, 2011

isso está a funcionar com "variáveis de template", onde você tem uma página asp que gera o conteúdo e cria esse html, o html(dados_view.html) quando gerado, aceda ao código fonte, e veja o valor que tem para essas variáveis {$foto2_value}

Entrar

Arquivado

Fancybox puxando de um banco de dados

Recommended Posts

Toscomics 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Toscomics 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Toscomics 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

saloeric 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante