Ir para conteúdo

POWERED BY:

Arquivado

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

edjames

LIGHTBOX + ACCORDION --- problema :(

Por , em Javascript

Recommended Posts

edjames    0

edjames
Postado

Olá pessoal, estou fazendo uma página de descrição de produto e quero usar o menu accordion junto com a apresentação da lightbox, no entanto estou tendo problemas com a light box quando a insiro na mesma página onde esta o accordion, alguém pode me dizer o que esta errado na página abaixo?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITULO</title>
<meta name="description" content="DESCRIÇÃO" />
	<meta name="keywords" content="PALAVRAS PARA OS MECANISMOS DE BUSCA" />
	<meta http-equiv="content-language" content="pt-br" />

<!--inicio da chamada dos scripts externos -->
	
	<!--inicio da chamada dos scripts da lightbox -->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/lightbox.js"></script>
		<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
	<!--fim da chamada dos scripts da lightbox -->
	
	<!--inicio da chamada dos scripts do accordion -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/accordion.css" />
		<script language="JavaScript" src="js/accordion.js" type="text/javascript" ></script>
		<script language="javascript" type="text/javascript">	
	<!--fim da chamada dos scripts do accordion -->

<!--fim da chamada dos scripts externos -->

			function AccordionInit() { <!--inicio do jQuery accordion -->
				var accTitle = $$('.TituloAccordion');
				var accContent = $$('.content');
				var pwAccordion = new Accordion(
						accTitle, accContent, {
						onActive: function(tog){
						tog.addClass('selected');
				var accTitleOnOff = new Fx.Styles(tog, {wait: false, duration: 350});
						accTitleOnOff.start
						({	'background-color': '#003366', 'color': '#DBDBDB', 'border-bottom-color': '#0060BF', 'padding-left': 6 });
						},

						onBackground: function(tog){
						tog.removeClass('selected');
							var accTitleOnOff = new Fx.Styles(tog, {wait: false, duration: 350});
								accTitleOnOff.start({ 'background-color': '#f2f2f2', 'color': '#003366', 'border-bottom-color': '#ddd', 'padding-left': 0 })
						},

						alwaysHide: true, duration: 500
						}
						);

// quando o mouse estiver em cima do título (efeito) 

						accTitle.each(function(div) {	
						var mouseFxs = new Fx.Styles(div, {duration: 250, wait: false});
							div.addEvents({
							'mouseover': function(){
								if (!div.hasClass('selected')) {
									mouseFxs.start({ 'background-color': '#dddddd',  'color': '#0c1f32', 'border-bottom-color': '#eeeeee', 'padding-left': 6 });
								}
						},

							'mouseout': function(){
								if (!div.hasClass('selected')) {
									mouseFxs.start({ 'background-color': '#f2f2f2', 	'color': '#484848',  'border-bottom-color': '#dddddd', 'padding-left': 0 });
								}
							}
					});
				});
			}

			window.addEvent( 'domready', function(){ AccordionInit(); });
			
			$(function() { $('#gallery a').lightBox(); }); <!-- Ativando o jQuery lightBox -->
</script> <!--fim do jQuery accordion -->
   	
	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {
	padding-left:1px;
	background-color: #FFF;
	padding: 1px;
	width: 350px;
	margin-left: 60px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #E1E1E1;
		border-width: 5px 5px 20px;
	}
	#gallery ul a:hover img {
		border: 5px solid #444;
		border-width: 5px 5px 20px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
	</style>

</head>


<body>
	<div id="borda">		
		
	  <div id="gallery" align="center">
		<ul>
			 <li><a href="imagens/portopro-480x480_ft01.jpg" title="MICRO PORTO PRO"><img src="imagens/portopro-60x60_ft01.jpg" width="60" height="60" alt="" /></a></li>
			 <li><a href="imagens/portopro-480x480_ft02.jpg" title="MICRO PORTO PRO"> <img src="imagens/portopro-60x60_ft02.jpg" width="60" height="60" alt="" /> </a> </li>
			 <li><a href="imagens/portopro-480x480_ft03.jpg" title="MICRO PORTO PRO"> <img src="imagens/portopro-60x60_ft03.jpg" width="60" height="60" alt="" /></a> </li>
			 <li><a href="imagens/portopro-480x480_ft01.jpg" title="MICRO PORTO PRO"> <img src="imagens/portopro-60x60_ft01.jpg" width="60" height="60" alt="" /></a> </li>
		</ul>
	</div> 

		  
<div id="dentrocontainer">

<a href="#" class="TituloAccordion">GABINETE</a>
		<div class="content">
			  <p>			
				- Padrão ATX , tipo mini-torre,  c/ 4 baias externas de 5 ¼”<br /><br />
				- Padrão ATX , tipo torre, c/ 5 baias externas de 5 ¼”<br /><br />
				- Padrão ATX,  tipo desktop, c/ 2 baias externas de 5 ¼”, com travas laterais para abertura sem ferramentas, com anilha para lacre de segurança <br /><br />
			</p>
		</div>


	<a href="#" class="TituloAccordion">FONTE DE ALIMENTAÇÃO</a>
<div class="content">
			<p>
				500w nominais (250w reais) chaveada 110/220 volts
	  <p></p>
			 </p>
   	</div>

	
	<a href="#" class="TituloAccordion">PROCESSADOR</a>
		<div class="content">
		  <ul>
				<li>
				  <span class="tahoma_b_11"><strong>PortoPRO</strong></span><span class="tahoma_b_11"><br />
					</span>
						  <p>
							Intel Celeron D 347 3.0Ghz, FSB 533Mhz, Cache L2 512K<br />
							Intel Celeron 420 1.6Ghz, FSB 800Mhz, Cache L2 512k <br />
							  Intel Celeron 430 1.8Ghz, FSB 800Mhz, Cache L2 512k<br /><br />
				</p>	   
			</li>
			  <li>
					<span class="tahoma_b_11"><strong>PortoPRO+ </strong></span>
			  <p>
							Intel Pentium 4 631 3.0 Ghz, FSB 800, Cache L2 2MB<br />
							<br />
							Intel Dual Core E2140 1.60 Ghz, FSB 800Mhz, Cache L2 1MB <br />
							Intel Dual Core E2160 1.80 Ghz, FSB 800Mhz, Cache L2 1MB <br />
							Intel Dual Core E2180 2.0 Ghz, FSB 800Mhz, Cache L2 1MB <br />
							<br />
							Intel Core2 Duo E4400 2.0 Ghz, FSB 800Mhz, Cache L2 2MB <br />
							Intel Core2 Duo E6320 1.86Ghz, FSB 1066Mhz, Cache L2 4MB<br />
							Intel Core2 Duo E6420 2.13Ghz, FSB 1066Mhz, Cache L2 4MB<br />
							Intel Core2 Duo E6550 2.33Ghz, FSB 1333Mhz. Cache L2 4MB <br /><br />
			  </p>
			</li>
			</ul>
		</div>


	<a href="#" class="TituloAccordion">MEMÓRIA RAM</a>
		<div class="content">
			<p>
				512MB DDR2 667MHZ <br /><br />
				1024MB DDR2 667MHZ <br /><br />
				1536MB DDR2 667MHZ <br /><br />
				2048MB DDR2 667MHZ <br /><br />
				3072MB DDR2 667MHZ<br /><br />
				4096MB DDR2 667MHZ<br /><br />
				1024MB DDR2 800MHZ <br /><br />
				2048MB DDR2 800MHZ <br /><br />
				4096MB DDR2 800MHZ<br /><br />
				8192MB  DDR2 800MHZ <br /><br />
		  </p>
	</div>


	<a href="#" class="TituloAccordion">DISCO RÍGIDO</a> 
		<div class="content">
			<p>
				80 GB SATA2 7200RPM<br /><br />
				160 GB SATA2 7200RPM<br /><br />
				250 GB SATA2 7200RPM<br /><br />
				400 GB SATA2 7200RPM <br /><br />
		  </p>
		</div>


	<a href="#" class="TituloAccordion">UNIDADES ÓTICAS</a>
		<div class="content">
			<p>
				1 Leitor e Gravador de Disquete de 3 ½”  1.44MB<br /><br />
				1 Leitor de CD/DVD e Gravador de CD<br /><br />
				1 Leitor e Gravador de DVD<br /><br />
				1 Leitor de Cartões<br /><br />
		  </p>
		</div>


	<a href="#" class="TituloAccordion">PLACA DE VÍDEO</a>
   		<div class="content">
			<p>
				Controladora DDR2 128MB dedicada<br /><br />
				Controladora DDR2 256MB dedicada<br /><br />
				Controladora DDR2 512MB dedicada<br /><br />
		  </p>
	  </div>
	
	
	<a href="#" class="TituloAccordion">PLACA DE FAX/MODEM (Opcional)</a>
		<div class="content">
			<p>
				56k V92 dedicada <br /><br />
			</p>
		</div>


	<a href="#" class="TituloAccordion">PLACA DE REDE</a>
		<div class="content">
			<p>
				1 Controladora 10/100/1000Mbits Dedicada com suporte a WOL<br /><br />
			</p>
		</div>


	<a href="#" class="TituloAccordion">CARACTERÍSTICAS DA PLACA MÃE</a>
		<div class="content">
   		  <table border="0" cellpadding="3" cellspacing="0">
			<tr>
			  <td width="250" align="left" valign="top" bgcolor="#F5F5F5"><p><strong>CHIPSET INTEL P965 & ICH8</strong></p>
							  
				  <p><strong>Armazenamento</strong></p>
<p>
						2 dispositivos Ultra DMA  100/66/33<br /><br />
						4 dispositivos Serial ATA <br /><br />
				</p>
				
				<p><strong>Expansão</strong></p>
<p>
						4 slots de Memória DDR2 800/667/533 Dual Channel (Máx 8 GB)<br /><br />
						  2 Slot  PCI-E x16<br /><br />
						  2 slots PCI-E x1<br /><br />
						  3 slots PCI<br /><br />
				</p>
				
				<p><strong>Portas</strong></p>
<p>
						1 Serial, 1 Paralela, 1 PS/2 (teclado), 1 PS/2 (Mouse), 1 audio<br /><br />
						  10 USB (4 traseiras, 2 frontais +  4 opcionais)<br /><br />
			   	</p>
				
				<p><strong>Controladoras on-board</strong></p>
<p>
						Audio CODEC de 8 canais <br /><br />
						Rede Pci-e 10/100/1000<br /><br />
			   	</p>
			 
			 </td>
			  
			  
			  
			  <td width="250" align="left" valign="top" bgcolor="#E5E5E5"><p><strong>CHIPSET INTEL P945P & ICH7</strong></p>
				  
				  <p><strong>Armazenamento</strong></p>
					  <p>
						1 dispositivo Ultra DMA  100/66/33<br /><br />
						4 dispositivo Serial ATA <br /><br />
				</p>
				
				<p><strong>Expansão</strong></p>
					<p>
						4 slots de Memória DDR2 667/533/400 Dual Channel (Máx 4GB)<br /><br />
						1 Slot  PCI-E x16<br /><br />
						2 slots PCI-E x1<br /><br />
						3 slots PCI<br /><br />
				</p>
				
				<p><strong>Portas</strong></p>
					<p>
						1 Serial, 1 Paralela, 1 PS/2 (teclado), 1 PS/2 (Mouse), 1 audio<br /><br />
						10 USB (4 traseiras, 2 frontais +  4 opcionais)<br /><br />
					</p>
				
				<p><strong>Controladoras on-board</strong></p>
					<p>
						Audio CODEC de 6 canais <br /><br />
						  Rede Pci-e 10/100/1000<br /><br />
					</p>	
		   	  </td>
			</tr>
		  </table>

   	  </div>


	<a href="#" class="TituloAccordion">MONITOR (opcional)</a>
		<div class="content">
			<p>
				Monitor de Vídeo tipo CRT de 17” <br /><br />
				Monitor de Vídeo tipo CRT de 19” <br /><br />
				Monitor de Vídeo tipo CRT de 22” <br /><br />
				Monitor de Vídeo tipo LCD 15” <br /><br />
				Monitor de Vídeo tipo LCD 15” Wide Screen <br /><br />
				Monitor de Vídeo tipo LCD 17” <br /><br />
			  </p>
		</div>


	<a href="#" class="TituloAccordion">SISTEMA OPERACIONAL</a>
		<div class="content">
			<p>
				Linux <br /><br />
				MS Windows XP Professional <br /><br />
				MS Windows Vista Home Premium 64 bits <br /><br />
				MS Windows Vista Business 64 bits <br /><br />
			  </p>
		</div>

	<a href="#" class="TituloAccordion">GARANTIA</a>
   	  <div class="content">
			  <p>
				1 ano Balcão <br /><br />
				1 ano on-site <br /><br />
				2 anos on-site <br /><br />
				3 anos on-site  <br /><br />
			</p>
   	</div>

<div id="rodape">

  </div>
  </div>
  </div>
</body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kadix    0

kadix
Postado

eu fiz um menu parecido só que nos itens que não tem submenu ao clicar ele vai pra página certinho

mas aí abre o menu todo! alguém sabe como corrigir isso?

 

desse jeito os itens que nã otem submenu, não vão abrir o link<script src="jquery.js"></script>

<script>
$(document).ready(function(){
	$("dd:not(#dd_open)").hide();
	$("dt a").click(function(){
	$("dd:visible").slideUp("slow");
	$(this).parent().next().slideDown("slow");
	return false;
	});
	});

</script>

e já desse jeito, os itens que não tem submenu abrem o link mas aí mostram o menu com todos os níveis aberto

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$(document).ready(function(){
$("dd:not(#dd_open)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
		var prox = $(this).parent().next()
		if(prox[0].nodeName=='DD'){
			$(this).parent().next().slideDown("slow");
			return false;
		}
	});
});

</script>

se ajudar, tem um link pra ver funcionando aqui

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