JQuery rotation WordPress

• SOLVED

More of a JQuery question than Wordpress, but the script is on a Wordpress site and I am willing to pay for the help.

I'm currently working on the below blogs homepage featured JQuery script. Its a standard hidden tab script that shows featured posts. Simple enough except the client now wants the tabs to automatically rotate.

Can anybody show me what needs adding to the current script to allow it to do so? I'm not an absolute noob when it comes to JQuery but our main man is off sick so please keep it simple... :)

Demo : http://blogplus.functionpixel.com/

header.php

<!-- Tabbed headlines -->
<script type='text/javascript'>
$(document).ready(function(){
$('.active_tab').fadeIn();
$('.tab_link').live('click', function(event){
event.preventDefault();
$('.tab_link_selected').removeClass('tab_link_selected');
$(this).addClass('tab_link_selected');
var container_id = $(this).attr('title');
$('.active_tab').animate({
height : 'toggle' , opacity : 'toggle'
},function(){
$(this).removeClass('active_tab');
$(container_id).addClass('active_tab');
$('.active_tab').animate({
height : 'toggle' , opacity : 'toggle'

});
});

});
});
</script>


index.php

<div id="tabs_wrapper">
<div class="tab-box">

<?php // Offset of first featured post to be displayed as default
query_posts( array ( 'post_type' => 'featured', 'posts_per_page' => 1, 'order' => 'DESC' ) );
if ( have_posts() ) : while (have_posts()) : the_post(); ?>

<div id="<?php echo the_slug(); ?>" class="tab_text active_tab">
<?php if(has_post_thumbnail()) {
the_post_thumbnail('medium');
} else {
echo '';
} ?>
<p><?php echo get_excerpt(); ?></p>

<p class="link"><a href="<?php $nivodata = get_post_meta($post->ID, 'nivo_slider', TRUE); echo $nivodata['nivo_imageurl'];
?>">Read more</a></p>
</div>


<?php endwhile; else: ?>
<?php endif; wp_reset_query();
?>


<?php // All other featured
query_posts( array ( 'post_type' => 'featured', 'posts_per_page' => 3, 'offset' => 1, 'order' => 'DESC' ) );
if ( have_posts() ) : while (have_posts()) : the_post(); ?>

<div id="<?php echo the_slug(); ?>" class="tab_text">
<?php if(has_post_thumbnail()) {
the_post_thumbnail('medium');
} else {
echo '';
} ?>
<p><?php echo get_excerpt(); ?></p>

<p class="link"><a href="<?php $nivodata = get_post_meta($post->ID, 'nivo_slider', TRUE); echo $nivodata['nivo_imageurl']; ?>">Read more</a></p>
</div>

<?php endwhile; else: ?>
<?php endif; wp_reset_query(); ?>

</div>

<div class="tab-nav">
<ul>

<?php query_posts( array ( 'post_type' => 'featured', 'posts_per_page' => 1, 'order' => 'DESC' ) );
if ( have_posts() ) : while (have_posts()) : the_post(); ?>

<li><a class="tab_link tab_link_selected" title="#<?php echo the_slug(); ?>" href="#">
<p><?php the_title(); ?></p></a></li>

<?php endwhile; else: ?>
<?php endif; wp_reset_query(); ?>

<?php query_posts( array ( 'post_type' => 'featured', 'posts_per_page' => 3, 'offset' => 1, 'order' => 'DESC' ) );
if ( have_posts() ) : while (have_posts()) : the_post(); ?>

<li><a class="tab_link" title="#<?php echo the_slug(); ?>" href="#">
<p><?php the_title(); ?></p></a></li>

<?php endwhile; else: ?>
<?php endif; wp_reset_query(); ?>

</ul>
</div>



Many thanks for your time chaps.

Answers (1)

2012-01-20

Julio Potier answers:

Hello

I can do this but i need FTP access because i can not test it on my website.

Thank you !

---

leannekera comments:

Will poke you on Skype Julio

---

Julio Potier comments:

I'm on it, code is in the page, just an issue and it's ok. SO, bear with me thank you ;)
<em>FYI I suggested $15</em>

---

Julio Potier comments:

Done
new code :
<!-- Tabbed headlines -->
<script type='text/javascript'>
$(document).ready(function(){
$('.active_tab').fadeIn();
$('.tab_link').live('click', function(event){
event.preventDefault();
$('.tab_link_selected').removeClass('tab_link_selected');
$(this).addClass('tab_link_selected');
var container_id = $(this).attr('title');
$('.active_tab').animate({
height : 'toggle' , opacity : 'toggle'
},function(){
$(this).removeClass('active_tab');
$(container_id).addClass('active_tab');
$('.active_tab').animate({
height : 'toggle' , opacity : 'toggle'

});
});

});
var timeOut = 5000; // set delay in milliseconds
setInterval( "if($('.tab_link_selected').parent().next().html()!=null){$('.tab_link_selected').parent().next().find('a').click()}else{$('.tab_link:first').click()}", timeOut );
});
</script>

my modifications are :
var timeOut = 5000; // set delay in milliseconds
setInterval( "if($('.tab_link_selected').parent().next().html()!=null){$('.tab_link_selected').parent().next().find('a').click()}else{$('.tab_link:first').click()}", timeOut );

So you can change the timeOut in the header.php.

See you !

<em>ps : think about the suggestion, ty</em>

---

leannekera comments:

AMAZING Job Julio, suggestion accepted. :)

Thanks again!