Adding 'Featured Imgs' to my Wordpress Slider / rotate through? - php

Question

I'm trying to finish 'themeing' my Wordpress / jQuery / JS slider; I currently have it where it successfully grabs the most recent Wordpress posts, but doesn't fully cycle through them in the main 'featured window'? (JavaScript error?) Also, I've yet to be able to successfully add the 'featured_image' to allow setting the image used in the 'featured window'.
I've gotten this far via some help at the base question: 'Themeing' my Slider in WP with PHP
Below is the code I'm using:
<?php
/**
* #package WordPress
* #subpackage Default_Theme
*/
$pagePtr="home";
include # ("header.php");
//get_header(); ?>
<div id="content">
<?php
/**
* #package WordPress
* #subpackage Default_Theme'
*/
//get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<!--Your slider code goes here-->
<?php
$args = array(
'numberposts' => 5,
'orderby' => 'post_date',
'order' => 'DESC'
);
$posts_array = get_posts( $args );
?>
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$i = 1;
foreach ($posts_array as $post) : setup_postdata($post);
?>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-<?php echo $i; ?>"><img src="<?php echo $featured_image; ?>" alt=""/><span><?php the_title(); ?><br /><p class="info" style="padding-left:10px;"><?php the_excerpt(); ?></p></span></li>
<?php $i++;
endforeach; ?>
</ul>
<?php
$i = 1;
foreach ($posts_array as $post) : setup_postdata($post);
?>
<!-- First Content -->
<div id="fragment-<?php echo $i; ?>" class="ui-tabs-panel" style="">
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
<div class="info" >
<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?><a href="<?php the_permalink(); ?>" >read more</a></p>
</div>
</div>
<?php $i++; endforeach; ?>
</div>
<!--Your slider code goes here-->
<!-- End Featured Lists Image Slider -->
<?php endif; ?>
<?php if($featured_image= get_post_meta($post->ID, "featured_image", true)) { ?>
<div class="postThumbnail"><img src="<?php echo $featured_image; ?>" height="190" width="125" border="0" /></div>
<?php } ?>
The Live Version via my test site: http://tinyurl.com/7q3o97u
Notice how the right side boxes are working correctly, and bringing in the recent posts - but for some reason the main area / left larger window, is not acting same?? How can I get this working properly??

Answer 1

I'm not sure it's the fundamental cause of your problem, but this line:
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
is causing a problem in the markup. It renders:
<img src="<img width="940" height="340" src="http://www.osmproduction.com/RIF/wp-content/uploads/2012/03/MaxBrooksRecordedAttacks-940x340.png" class="attachment-slider_image wp-post-image" alt="MaxBrooksRecordedAttacks" title="MaxBrooksRecordedAttacks" />" alt="" />
which isn't right. the_post_thumbnail returns a full HTML img tag, not just the image URL. Try replacing
<img src="<?php the_post_thumbnail('slider_image'); ?>" alt="" />
with
<?php the_post_thumbnail('slider_image'); ?>