Ir para conteúdo

POWERED BY:

Arquivado

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

msmarins

Problema com slider - JQuery

Por , em Javascript

Recommended Posts

msmarins    2

msmarins
Postado

Olá a todos.

Me foi passado um trabalho no qual tenho que fazer o slider parecido com o do diário lancenet (www.lancenet.com.br). Nele o usuário passa o mouse em um box de texto e a imagem daquele destaque aparece ao lado. Além do slider ficar rodando automaticamente de box em box. Quando o cara clicar será direcionado àquela matéria.

Achei um plugin Jquery que me atendia mas o problema é que o href do link chama a div que contem a imagem e eu não tenho como colocar o link para a matéria daquele destaque.

Chamada da função:

	$(document).ready(function(){
		$("#featured > ul").tabs({
		 event: 'mouseover', 
		 fx:{opacity: "toggle"}
		}).tabs("rotate", 5000, true);
	});

 

html:

<div id="featured" >
<ul class="ui-tabs-nav">
				<?php 
				$numeracao_img = 1 ;
				$numeracao_class = 1 ; 
				include ("conexao.php");
           $query="select * from destaques order by id desc limit 4";
           $result=mysql_query($query);
           $num=mysql_num_rows($result);
		while ($registro = mysql_fetch_array($result)) { 
               $id = $registro ["id"];	
			$titulo = $registro ["titulo"];
			$subtitulo = $registro ["subtitulo"];
			$foto = $registro ["foto_home"];
			$foto2 = $registro ["foto_mais_destaque"];
			?>
					<li class="ui-tabs-nav-item" id="nav-fragment-1">
						<a  href="#teste_<?php echo $numeracao_class++; ?>">
							<span>
								<h4><?php echo $titulo; ?></h4>
								<p><?php echo $subtitulo; ?></p>
							</span>
						</a>
						<div id="teste_<?php echo $numeracao_img++; ?>" class="ui-tabs-panel ui-tabs-hide" style="">
							<img src="upload/destaques/imagens/img_home/home_1.jpg" alt="" width="336" height="250" border="0" />
						</div>
					</li>

		<?php  
		    }
		mysql_close();
		?>
		</div>

 

Por favor, alguem poderia ajudar!?

Desde já, agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado 

<?php
   $numeracao_img = 1 ;
   $numeracao_class = 1 ;
   include ("conexao.php");
   $query = "select * from destaques order by id desc limit 4";
   $result = mysql_query($query);
   $num = mysql_num_rows($result);
?>
<div id="featured" >
   <ul class="ui-tabs-nav">
       <?php while ($entity = mysql_fetch_object($result)) : ?>
       <li class="ui-tabs-nav-item" id="nav-fragment-<?php echo $numeracao_class++; ?>">
           <a  href="#teste_<?php echo $numeracao_class++; ?>">
               <span>
                   <h4><?php echo $entity->titulo; ?></h4>
                   <p><?php echo $entity->subtitulo; ?></p>
               </span>
           </a>
           <div id="teste_<?php echo $numeracao_img++; ?>" class="ui-tabs-panel ui-tabs-hide" style="">
               <img src="upload/destaques/imagens/img_home/home_1.jpg" alt="" width="336" height="250" border="0" />
           </div>
       </li>
       <?php endwhile; ?>
   </ul>
</div>
<?php mysql_close(); ?>

 

pequena organizada aí já caio no problema em si.. se puder falar onde acho esse plug in e qual forma tem q escrever q você não pode ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

então ak eu trabalhei com array mas você vai usa o

while(mysql_fetch_object($result)) :

não esqueça de fecha o while com:

<?php endwhile; ?>

 

voce deve retirar essa linha q usei pra transformar o array em obj

<?php $entity = (object) $entity; //transformando array em objeto ?>

 

 

<div id="featured" >
   <!-- criando abas -->
   <ul class="ui-tabs-nav">
       <?php $i = 1; //zerando contador ?>
       <?php foreach ($array as $entity) : //mudei para foreach para trabalhar com array?>
       <?php $entity = (object) $entity; //transformando array em objeto ?>
       <li class="ui-tabs-nav-item" id="nav-fragment-<?php echo $i; ?>">
           <a  href="#fragment-<?php echo $i; ?>">
               <span>
                   <?php echo $entity->titulo; ?>
                   <br />
                   <?php echo $entity->subtitulo; ?>
               </span>
           </a>
       </li>
       <?php $i++; //incrementando contador ?>
       <?php endforeach; ?>
   </ul>

   <!-- criando conteúdo para as abas -->
   <?php $i = 1; //zerando contador ?>
   <?php foreach ($array as $entity) :?>
    <?php $entity = (object) $entity; //transformando array em objeto ?>

    <!-- Conteudo Aba <?php echo $i; ?> -->
    <div id="fragment-<?php echo $i; ?>" class="ui-tabs-panel ui-tabs-hide" style="">
       <img src="<?php echo $entity->foto; ?>" alt="">
       <div class="info">
           <h2><a href="#"><?php echo $entity->titulo; ?></a></h2>
           <p><?php echo $entity->subtitulo; ?><a href="#">read more</a></p>
       </div>
    </div>
    <?php $i++; //incrementando contador ?>
   <?php endforeach; ?>
</div>

 

para mostrar suas imagens você deve usar assim

 

$entity->foto_home;
$entity->foto_mais_destaque;

 

não esqueça de add o estilo css do plugin

<link rel="stylesheet" type="text/css" href="/featured-content-slider/style.css">

 

nenhuma alteração no js foi feita

 

<script type="text/javascript">
       $(document).ready(function(){
           $("#featured > ul").tabs({
               event: 'mouseover',
               fx:{opacity: "toggle"}
           }).tabs("rotate", 5000, true);
       });
   </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

msmarins    2

msmarins
Postado

Mas ainda assim continuo sem poder colocar um link diferente (<a href="#fragment-1">) nas abas de navegação pois ele chamam o ID da div que contem a imagem (div id="fragment-1").

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

com certeza tem alguma forma melhor de fazer mas já funciona..

 

$(".ui-tabs-nav-item").each(function(item){
               var i = item+1;
               $('a[href="#fragment-'+i+'"]').click(function(){

                   switch(i){
                       case 1:
                           alert('ir link 1');
                           break;
                       case 2:
                           alert('ir link 2');
                           break;
                       case 3:
                           alert('ir link 3');
                           break;
                       case 4:
                           alert('ir link 4');
                           break;
                       default:
                           alert('link invalido');
                           break;
                   }
               })
           });

Compartilhar este post

Link para o post
Compartilhar em outros sites

msmarins    2

msmarins
Postado

Eu entendi a solução mas não funcionou. Deve ser alguma coisa que euesteja fazendo errado. Pode dar uma olhada.

Abraço!

<div id="featured" >
<ul class="ui-tabs-nav">
<script>			
	$(".ui-tabs-nav-item").each(function(item){
           var i = 1;
           $('a[href="#fragment-'+i+'"]').click(function(){
            switch(i){
               case 1:
               alert('ir link 1');
               break;
               case 2:
               alert('ir link 2');
               break;
               case 3:
               alert('ir link 3');
               break;
               case 4:
               alert('ir link 4');
               break;
               default:
               alert('link invalido');
               break;
                   }
               })
           }); 
</script>
<?php 
	$numeracao_img = 1 ;
	$numeracao_class = 1 ; 
?>
	<li class="ui-tabs-nav-item" id="nav-fragment-1">
		<a href="#fragment-<?php echo $numeracao_class++; ?>">
			<span>
				<h4>Arraiá do Salê</h4>
				<p>Alegria e confraternização em uma das mais tradicionais festas juninas da cidade! </p>
			</span>
		</a>
		<div id="fragment-<?php echo $numeracao_class++; ?>" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="upload/destaques/imagens/img_home/home_1.jpg" alt="" width="336" height="250" border="0" />
		</div>
	</li>
	<li class="ui-tabs-nav-item" id="nav-fragment-1">
		<a  href="#fragment-<?php echo $numeracao_class++; ?>">
			<span>
				<h4>Arraiá do Salê</h4>
				<p>Alegria e confraternização em uma das mais tradicionais festas juninas da cidade! </p>
			</span>
		</a>
	</li>
	<li class="ui-tabs-nav-item" id="nav-fragment-1">
		<a href="#fragment-<?php echo $numeracao_class++; ?>">
			<span>
				<h4>Arraiá do Salê</h4>
				<p>Alegria e confraternização em uma das mais tradicionais festas juninas da cidade! </p>
			</span>
		</a>
		</li>
</ul>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide" style="">
	<img src="upload/destaques/imagens/img_home/home_1.jpg" alt="" width="336" height="250" border="0" />
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
	<img src="upload/destaques/imagens/img_home/home_0.jpg" alt="" width="336" height="250" border="0" />
</div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
	<img src="upload/destaques/imagens/img_home/image3.jpg" alt="" width="336" height="250" border="0" />
</div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="" >
	<img src="upload/destaques/imagens/img_home/image4.jpg" alt="" width="336" height="250" border="0" />
</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

você precisa add o code logo após a função do jquery

 

dentro do bloco

        $(document).ready(function(){

           //slider
           $("#featured > ul").tabs({
               event: 'mouseover',
               fx:{opacity: "toggle"}
           }).tabs("rotate", 5000, true);

           //slider.addLink
           $(".ui-tabs-nav-item").each(function(item){
               var i = item+1;
               $('a[href="#fragment-'+i+'"]').click(function(){

                   switch(i){
                       case 1:
                           alert('ir link 1');
                           break;
                       case 2:
                           alert('ir link 2');
                           break;
                       case 3:
                           alert('ir link 3');
                           break;
                       case 4:
                           alert('ir link 4');
                           break;
                       default:
                           alert('link invalido');
                           break;
                   }
               })
           });
       });

Compartilhar este post

Link para o post
Compartilhar em outros sites

msmarins    2

msmarins
Postado

Cara você é faixa preta nisso mesmo. Gostaria de agradecer sua ajuda.

Mas preciso te alugar um pouco mais.

Cada "li" deste código será gerada dinamicamente e os dados virão de um Banco de dados. Titulo, subtitulo e etc. Além do ID de cada registro do banco. Quando a pessoa clicar ali vai pra outra página que os textos tbm vião de um banco. Então vai ficar alguma coisa assim: destaque.php?index=xx, onde xx será o id do registro na tabela do banco.

Como eu passarai esta informação pra substiuir naquele alert do seu código.

Estava pensando em um imput tipo hidden... é isso?

 

Obrigado mesmo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

cria uma div oculta dentro de cada elemento a das abas e ele irá conter somente o id do destaque.

 

           <a  href="#fragment-<?php echo $i; ?>">
               <div style="display: none"><?php echo $entity->id; ?></div>
               <span>
                   <?php echo $entity->titulo; ?>
                   <br />
                   <?php echo $entity->subtitulo; ?>
               </span>
           </a>

 

é obrigatório q essa div seja o primeiro filho da tag a

 

daí você altera a função anterior pra essa ak.

 

$(".ui-tabs-nav-item").each(function(item){
               var i = item+1;
               $('a[href="#fragment-'+i+'"]').click(function(e){
                   var t = $(this).find(">:first-child").html();

                   var url = '/?destaque='+t;
                   alert(url);
               })
           });

Compartilhar este post

Link para o post
Compartilhar em outros sites

msmarins    2

msmarins
Postado

Perfeito meu amigo. Salvou a minha vida!

Obrigado pela ajuda!

Tu é o Jedi do javascript.

Vou implantar e torcer para que os IEs não encham o saco.

Abraço!

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