WordPress.org

Ready to get started?Download WordPress

Forums

Featured Content Slider (1 post)

  1. nekoburrito
    Member
    Posted 2 years ago #

    Hi there,

    I'm going to admit that I'm a novice here, and that I'm working on my first WordPress theme. As far as coding the theme goes, it's going great; I've manged to get most things working the way I want them to. However, I've been wanted to add a featured post slider to it using jQuery and jQuery-ui (This may be a bit ambitious, I know, considering I don't actually know jQuery), and that's where I start running into trouble. The issue is that it either doesn't work, or it doesn't work correctly.

    You can take a look at how I kinda want to set it up at http://www.nekoburrito.com/eruditetest. I've got the space all set up, I just can't get it to work right!

    To give a brief idea of how I have it set up, here's a dumbed down version of the code. I've replaced info with comment tags to try to shorten it a bit. As it is, the jQuery does not work.

    <div id="featured" >
        <?php
            $featuredPosts = new WP_Query();
            $featuredPosts->query("showposts=4&cat=7");
            while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
        ?>
    
        <?php endwhile;?>                         
    
                    <!-- Navigation Below -->
    
        <ul class="ui-tabs-nav">
            <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
    
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php the_ID();?>">
    
                <!-- Post Author, date, comments -->
    
            </li>
        </ul>
                    <!-- End Navigation -->
                    <!-- Slider Image / Image Overlay Text Below -->
    
        <div id="fragment-<?php the_ID();?>" class="ui-tabs-panel" style="">
            <?php the_post_thumbnail();?>
            <div class="info" >
    
                <!-- Post Name, Excerpt -->
            </div>
        </div>
    
                    <!-- End Slider Image / Image Overlay -->
    
        <?php endwhile;?>
    
    </div>

    However, If you move the </ul> to below the second <?php endwhile;?> the jQuery will work, but everything appears off to the right hand side of the page in the middle of nowhere. I've tried correcting this through the CSS, but it doesn't budge.

    Also, If it's important, I'm calling jquery-1.7.1.min.js and jquery-ui-1.8.17.min.js from my js folder, and the jquery code to make it rotate looks like this:

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

    Are my loops messed up, and screwing with everything, or could there be something else that I'm just not getting? I've tried altering the CSS once I get the jQuery to function, but the image doesn't move.

    Thanks for any help :)

Topic Closed

This topic has been closed to new replies.

About this Topic