[Resolvido] LIGHT BOX

studdiox · Outubro 6, 2008

Bom li sobre o lightbox mas nao entendi como faço para chamar as imagens sei que tenho que por rel="lightbox" isso com uma

normal html no meu caso nao consegui aplicar pois minha galeria funciona assim

tenho um list que mostra todas as galerias cadastras ex: 1998 , 1999 , 2000 e assim por diante ai quando tu clica em uma galeria ex: 2000 entra e ali tem as miniaturas das fotos cadastradas para esta galeria ok , agora vem a duvida como fazer o lightbox pegar certinho o id da imagem e passar certinho todas as imagens desta galeria em questao ( 2000 ) vou postar o cod ja com as tags lightbox so falta mesmo eh chamar a imagem conforme sua ID

<?
include("conecta_db.php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<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>

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font: normal 10px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background: #000000 url(../img/centro.jpg) no-repeat fixed center top;
}
a {
	color: #FFFFFF;
	font: bold 12px Arial, Helvetica, sans-serif;
	text-decoration: none;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFF00;
}
a:active {
	text-decoration: none;
	color: #FFFF00;
}
.Estilo2 {
	color: #FFFF00;
	font-weight: bold;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
var newwindow;
function poptastic(url)
{
	newwindow=window.open(url,'name','width=550,height=500');
	if (window.focus) {newwindow.focus()}
}

</script>
</head>
		   <?php			 
			$reg = $_GET["categoria"];
			$sql=mysql_query("SELECT * FROM categorias WHERE codigo LIKE '$reg'") or die(mysql_error()); 
			$dados = mysql_fetch_array($sql); 
			$id = $dados["codigo"];
			//$categoria = $dados["categoria"]; 
			$miniatura = $dados["foto"]; 
			list ($foto1) = split('[;]',$miniatura);
			?>
<body>
<table width="600" height="370" border="0" align="center" >
  <tr  height="38">
	<td height="1" colspan="3"> </td>
  </tr>
  <tr  height="38"><td height="38"> </td>
  <td width="293" align="right" valign="top"  class="titulo Estilo2"><br>
	<strong>Galeria de Fotos </td>
  <td width="273" height="38" align="left" valign="middle"  class="titulo">  
	  <?="<img src= gera_thumb.inc.php?imagem=$foto1&x=90 style= filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)/>"?></td>
  </tr>
  <tr><td width="20" > </td><td colspan="2" align="center" valign="top">
  <table >
								<?
		if(empty($x))
		{
			$consulta1 = "SELECT * FROM produtos WHERE Categoria like '$categoria' ORDER BY Codigo ASC";
			$resultado1=mysql_query("$consulta1");
			$x = mysql_num_rows($resultado1);
			$consulta = "SELECT * FROM produtos WHERE Categoria like '$categoria' ORDER BY Codigo ASC";
			$resultado=mysql_query("$consulta") or die("Erro na consulta ao Banco de dados Mysql");
			$a=10;			
			
		}else
		{
			$consulta = "SELECT * FROM produtos WHERE Codigo <= $x and  Categoria like '$categoria' ORDER BY Codigo ASC";
			$resultado=mysql_query("$consulta") or die("Erro na consulta ao Banco de dados Mysql");
		}
		$var = $x - 3;
		$conta = 1;

		while($linha=mysql_fetch_array($resultado))
		{
	
		$codigo=$linha["Codigo"];
		$titulo=$linha["Titulo"];
		$texto=$linha["Texto"];
		$foto=$linha["Foto"];
		
		?>
		
************* AQUI ESTA A DUVIDA EU CHAMAVA A IMAGEM ASSIM E AGORA O QUE POR AQUI PARA CHAMAR O LIGHTBOX *******************			
		<td align=center><a href="java script:;" onClick="java script:poptastic('ver_fotos.php?codigo=<? print $codigo; ?>&categoria=<? print $categoria; ?>&onde=igual');">

								 <?		
		print "<img src='gera_thumb.inc.php?imagem=$foto&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' border='0'><br><font class=linko>$titulo</td>";
	
	if($conta == 12)
	{		
		print "</tr></table>";
		$x--;
		
		break;
	}
	if($x == $var)
	{
		print "</tr><tr>";
		$var = $var - 4;
		
	}
	$conta++;
	$x--;
		  }
								 ?>
</td></tr></table></td></tr></table>
							  <?
/*print "</td></tr></table></td></tr></table><table class=tabela width='70%' border=0 align=center valign='botton'><tr><td width=80%>";
if($a != 10)
{
print"<a class=text href='java script:history.go(-1)'><img src='images/previous.jpg' border='0'></a>";
}
if($conta >=8)
{
$y=$codigo-1;
print "</td><td><a class=text href='produtos_mostra.php?x=$y&var=$var&categoria=$categoria'><img src='images/next.jpg' border='0'></a></td></tr></table>";
}
							   */?>	  


</body>
</html>

Rasp · Outubro 6, 2008

Então studdiox,

Pelo que entendi através de um javascript você chama um Pop-UP que é uma página que possue todas as miniaturas, certo? se sim... basta somente dentro da página onde aparecem as miniaturas você colocar o rel="lightbox" na tag img

Se eu não tiver entendido direito me corrija...

Esclareça quanto essa parte do codigo... é o thumb das fotos ou é o thumb da galeria?

Se for das fotos faça isso:

<img src='gera_thumb.inc.php?imagem=$foto&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' rel='lightbox' border='0'><br><font class=linko>$titulo</td>

Qualquer coisa postae.

Abs

Ps: acho que você postou no fórum errado... essa dúvida é Javascript... mais algum moderador move pra ti.

studdiox · Outubro 6, 2008

E aee blza Rasp finalmente uma Luz ehhehe

Seguinte a popup era pra ser a imagem ampliada entende esse cod que você postou ali editado

eh o cod que gera os thumbs das imagens da galeria ai se eu clicar em um thumb dessa galeria

ele abriria a popup que que vem do cod

<td align=center><a href="java script:;" onClick="java script:poptastic('ver_fotos.php?codigo=<? print $codigo; ?>&categoria=<? print $categoria; ?>&onde=igual');">

ai nesse caso eu tinha feito tipo como se fosse paginaçao mas nao deu muito certo ele nao sabia qndo era o inicio e nem o final das imagens da galeria e dava erro agora vou tentar por o lightbox pra ver se resolve

ou seja eh ali que eu acho que tenha q se mudar pra chamar o light box ...nao sei se eu expliquei ou enrolei mais ainda !!

nao cara eu so chamo pelo java mas eu tenho q tirar isso dali e por o lightbox ali meu cod eh PHP mesmo

Rasp · Outubro 6, 2008

Então... já testou com esse cod que eu postei ai? substituindo?

cola esse lá e dá uma testada

<img src='gera_thumb.inc.php?imagem=$foto&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' rel='lightbox' border='0'><br><font class=linko>$titulo</td>

Pois essa parte do Pop-up do javascript terá de morrer....

Ou melhor se puder posta um link com isso online... que vejo certinho e te passo... mais se quiser testa desse modo tb

Abs

studdiox · Outubro 6, 2008

Então... já testou com esse cod que eu postei ai? substituindo?

cola esse lá e dá uma testada
<img src='gera_thumb.inc.php?imagem=$foto&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' rel='lightbox' border='0'><br><font class=linko>$titulo</td>
Pois essa parte do Pop-up do javascript terá de morrer....

Ou melhor se puder posta um link com isso online... que vejo certinho e te passo... mais se quiser testa desse modo tb

Abs

Bom assim com esse cod que você me passou ele nao chama o lightbox aqui vai como esta funcionando

http://arielmuller.kavos.kinghost.net/index.php

Clica no menu fotos e escolhe uma galeria " ano " vou deixar como eu estava fazendo

ai depois tu me da uma uma ideia ok

Marcio Leandro · Outubro 6, 2008

Fórum errado amigo.

Movido: PHP=>Javascript

Rasp · Outubro 6, 2008

Então cara... estava observando o seguinte... você não fez include do arquivo .js do lightbox... por isso não está funcionando... testa colocar e usar o cod que eu te passei... e fala qq rolou

abs

studdiox · Outubro 6, 2008

Então cara... estava observando o seguinte... você não fez include do arquivo .js do lightbox... por isso não está funcionando... testa colocar e usar o cod que eu te passei... e fala qq rolou

abs

E aee seguinte coloquei o cod como você me passou e nao aconteceu nada se colocar o mouse em cima da miniatura nada acontece ele nao linca com nada !!!

studdiox · Outubro 7, 2008

Então cara... estava observando o seguinte... você não fez include do arquivo .js do lightbox... por isso não está funcionando... testa colocar e usar o cod que eu te passei... e fala qq rolou

abs

E aee seguinte coloquei o cod como você me passou e nao aconteceu nada se colocar o mouse em cima da miniatura nada acontece ele nao linca com nada !!!

Niguem ai com alguma ideia pra esse caso ?

Rasp · Outubro 9, 2008

Entao cara!

Como já te falei por msn... o problema que está dando agora é da sua programação... pois não exibe seu link corretamente...

te passei o modo correto de como fazer mais você não deu posição...

abs

studdiox · Outubro 10, 2008

Entao cara!

Como já te falei por msn... o problema que está dando agora é da sua programação... pois não exibe seu link corretamente...

te passei o modo correto de como fazer mais você não deu posição...

abs

E aee blza cara nao consegui entrar mais na net nos ultimos dias desculpe normalmente consigo entrar na net so de noite mas agora creioq resolvi todos meus afazeres e vou ter um pouco mais de tempo para tentar resolver isso do lightbox conto com a tua .... quando estiver online me chama ai no msn ok T +

studdiox · Outubro 12, 2008

Bom acho que esta faltando alguma coisa ai pra dar certo conforme o cod que você me passou faltou o < a href= ... pra poder dar link so este aqui nao esta funcionando

<img src='gera_thumb.inc.php?imagem=$foto&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' rel='lightbox' border='0'><br><font class=linko>$titulo</td>

berkowitz · Outubro 13, 2008

cara... você está pedindo o lightbox para os elementos A cujo atributo REL seja igual a lightbox:

$(function(){$("a[rel=lightbox]").lightBox();});

Porém você aplicou esse atributo para o IMG e não A...

studdiox · Outubro 13, 2008

--------------- RESOLVIDO ----------------------

FINALMENTE RESOLVIDO COM A AJUDA DOS AMIGOS MARCIO.SFS E JWS_JUNIOR BAH GALERA SE NAO FOSSE VOCES NAO SEI COMO SERIA MUITO OBRIGADO MESMO abixo o o cod com o prolema solucionado

<HTML>
...

<script TYPE="text/javascript" SRC="jQuery.js"></SCRIPT>
<script TYPE="text/javascript" SRC="jquery.lightbox-0.4.js"></SCRIPT>
<LINK REL="stylesheet" TYPE="text/css" HREF="jquery.lightbox.css" />

<script type="text/javascript">

$(function(){$("a[rel=lightbox]").lightBox();});

var newwindow;

function poptastic(url)
{
	newwindow=window.open(url,'name','width=550,height=420');
	if (window.focus) {newwindow.focus()}
}
</script>

... 
			  
  <TABLE ALIGN="center" >
	
...
				
		<TD align=center><a href="images/3cfb384852a4545d8664b453ee5dd4b11999-Taquari.JPG" rel="lightbox">
<img src='gera_thumb.inc.php?imagem=images/3cfb384852a4545d8664b453ee5dd4b11999-Taquari.JPG&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' rel='lightbox' border='0'><br><font class=linko></td>		 
				
		<TD align=center><a href="images/9c649217b5fd500560660eed20ae9e191999-Triunfo.JPG" rel="lightbox">
<img src='gera_thumb.inc.php?imagem=images/9c649217b5fd500560660eed20ae9e191999-Triunfo.JPG&y=75' style='filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=4)' rel='lightbox' border='0'><br><font class=linko></td>		 

...
				
</TABLE>

...

Arquivado

[Resolvido] LIGHT BOX

Recommended Posts

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rasp 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rasp 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcio Leandro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rasp 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rasp 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

studdiox 0

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