Question

Im trying to get this working but for some reason it’s just not right. I want an image to fade to another image and just keep looping. It works in the fiddle but not on my wordpress site. I think it has to do with this piece. Any help would be greatly appreciated.

Here is the example: http://jsfiddle.net/8ks9K/

jQ:

function cycleImages() {
    $('#portfolio_cycler').each(function() {
        var $active = $(this).find('.active');
        var $next = ($(this).find('.active').next().length > 0) ? $(this).find('.active').next() : $(this).find('img:first');
        $next.css('z-index', 2); //move the next image up the pile
        $active.fadeOut(1500, function() { //fade out the top image
            $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
            $next.css('z-index', 3).addClass('active'); //make the next image the top one
        });
    });
}

$(document).ready(function() {
    // run every 5s
    setInterval('cycleImages()', 5000);
});

HTML:

<div id="feat_header">
    <div id="portfolio_cycler">
        <img class="active" src="http://baylor-personal-edge.com/wp-content/themes/striking/images/text_slide1.jpg" alt="You're used to a certain type of comfort" />
        <img src="http://baylor-personal-edge.com/wp-content/themes/striking/images/text_slide2.jpg" alt="You're physical should be no different" />        
    </div>
</div>

CSS:

#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#feat_header {
    background:#000;
    position:absolute;
    top:20px;
    left:1px;
    height:23px;
    width:310px;
    z-index:9999;
    padding:10px;
    font-size:15px;
    color:#FFF;
    font-style:italic;
    font-weight:bold;
}

Answer 1

Something to keep in mind when developing in any framework that may be using jQuery or has plugins that may be using jQuery is to define a noConflict.

var $j = jQuery.noConflict();

just remember that you now need to change any instance of jQuery or $ to your newly defined $j

$j(document).ready(function() {
    $j('.example').fadeIn();
});

This may explain why its not working in WordPress.