Ir para conteúdo

Arquivado

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

Caverinha

[Resolvido] Slider com jQuery

Recommended Posts

Bem galera... estou tentando adaptar um Slider jQuery para o wordpress

em html seria isto

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); 
	});
</script>



<div id="slider">
             <div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
	        
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="images/image1.jpg" alt="" width="480" height="250" />
			 <div class="info" >
           <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image2.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
			 </div>
	    </div>
</div>

No meu tema wordpress está assim:

<div id="slider">
  <div id="featured" >
		  <ul class="ui-tabs-nav">
           <?php
               $postcount = 0;
               $featured_query = new WP_Query('showposts=3&category_name=destaques');
               while ($featured_query->have_posts()) : $featured_query->the_post();

               $do_not_duplicate[] = get_the_ID();
               $postcount++;
           ?>
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $postcount; ?>"><a href="#fragment-<?php echo $postcount; ?>">
<img src="<?php echo get_post_meta($post->ID, "imagem", true);?>" alt="<?php the_title();?>" width="80" height="50" /><span><?php the_title(); ?></span></a></li><?php endwhile; ?>
	      </ul>

	    
           <?php
               $postcount = 0;
               $featured_query = new WP_Query('showposts=3&category_name=destaques');
               while ($featured_query->have_posts()) : $featured_query->the_post();

               $do_not_duplicate[] = get_the_ID();
               $postcount++;
           ?>
        <!-- First Content -->
	    <div id="fragment-<?php $postcount; ?>" class="ui-tabs-panel" style="">
			<img src="<?php echo get_post_meta($post->ID, "imagem", true);?>" alt="<?php the_title(); ?>" width="480" height="250" />
			 <div class="info" >
           <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				<p><?php the_excerpt(); ?>...<a href="<?php the_permalink(); ?>" >Leia mais</a></p>
			 </div>
	    </div>
           <?php endwhile; ?>
	   

	   </div>
          </div>
Quando visualizo o tema a função jQuery não roda pois o segundo "#fragment" deveria estar com a class "ui-tabs-hide".. Oque eu não faço idéia de como fazer..já que estou usando WP_Query, e para retonar 1 "#fragment-x" estou usando <?php $postcount; ?>.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem, dando uma analisada.. achei uma saída, por uma gambiarra na verdade:

eu posso usar o WP_Query post pra cada "#fragment" porque quero apresentar apenas 3, para isso utilizarei a função "offset" dizendo no query, que no "#fragment-1" seja o post mais recente, e que o post do "#fragment-2" seja diferente do 1 e assim por diante. Mais mesmo assim, ficaria um código gigantesco. E gostaria muito de conhecer outra solução.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui resolver.. muito obrigado pelo espaço.

Resolvi usando os seguintes argumentos:

<?php $counting = 1 ?>
<?php query_posts('cat=' . get_option('slideshow-id') . '&showposts=' . get_option('slideshow-posts')); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $do_not_duplicate[$post->ID] = $post->ID; ?>

<?php if ( $counting == 1 ) { ?>
<?php } else { ?>
<?php } ?>

<?php $counting = $counting + 1 ?>
<?php endwhile; else: ?>
        <?php endif; ?>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.