I'm working on a site with a feature slider using the JQuery code in http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ All the elements seem to be working OK except that the script isn't being initialised. I'm not sure what I have done wrong so if anyone can give any ideas they would be gratefully received.
The code in my functions.php is as follows
//jQuery
function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
// Add slider script to head
function xcmag_slider_script() {
?>
<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">
jQuery(document).ready(function(){
$("#xcmag-featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#xcmag-featured").hover(
function() {
$("#xcmag-featured").tabs("rotate",0,true);
},
function() {
$("#xcmag-featured").tabs("rotate",5000,true);
}
);
});
</script>
<?php
}
add_action('wp_head','xcmag_slider_script');
//create feature slider for home page
function xcmag_featured_slider() {
//Get posts details
$cat_post_ids = array();
// fetch latest three features
$cat = 5; //category id
$posts=get_posts('showposts=3&cat='. $cat);
if ($posts) {
foreach($posts as $post) {
array_push($cat_post_ids, $post->ID);
}
}
// fetch the latest issue banner
$cat = 10; //category id
$posts=get_posts('showposts=1&cat='. $cat);
if ($posts) {
foreach($posts as $post) {
array_push($cat_post_ids, $post->ID);
}
}
// out put slider
echo '<div id="xcmag-featured" >', chr(10);
echo ' <ul class="ui-tabs-nav">', chr(10);
echo ' <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1">' . get_the_post_thumbnail($cat_post_ids[0], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
echo ' <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2"><a href="#fragment-2">' . get_the_post_thumbnail($cat_post_ids[1], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
echo ' <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3"><a href="#fragment-3">' . get_the_post_thumbnail($cat_post_ids[2], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
echo ' <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4"><a href="#fragment-4">' . get_the_post_thumbnail($cat_post_ids[3], 'homepage-thumb-small') . '<span></span></a></li>', chr(10);
echo ' </ul>', chr(10);
$i=0;
while($i<=3) {
echo '<div id="fragment-' . ($i+1) . '" class="ui-tabs-panel" style="">', chr(10);
echo get_the_post_thumbnail($cat_post_ids[$i], 'homepage-thumb-big'), chr(10);
$post = get_post($cat_post_ids[$i]);
echo ' <div class="info" >', chr(10);
echo ' <h2><a href="' . get_permalink( $cat_post_ids[$i] ) . '" >' . $post->post_title . '</a></h2>', chr(10);
// Dynamically resize excerpt according to title length
$rem_len = ""; //clear variable
$title_len = strlen($post->post_title); //get length of title
if($title_len <= 35){
$rem_len=188; //calc space remaining for excerpt
}elseif($title_len <= 70){
$rem_len=146;
}elseif($title_len <= 105){
$rem_len=104;
}elseif($title_len <= 140){
$rem_len=62;
}
$trunc_ex = substr($post->post_excerpt, 0, $rem_len); //truncate excerpt to fit remaining space
$trunc_ex = $trunc_ex . '<a href="' . get_permalink( $cat_post_ids[$i] ) . '" >[Read More]</a>';
echo "<p>" . $trunc_ex . "</p>", chr(10); //display excerpt
echo ' </div>', chr(10);
echo ' </div>', chr(10);
$i++;
}
echo '</div>', chr(10);
}
?>
The final function is called from the home.php file in my child theme. If I take the generated html and put it in a file with the scripting manually added it all works fine, just doesn't work when in the theme.
