I am trying to manually install nivoslider to a wordpress theme so I can add nivoslider as an option to the theme options panel. Initially I just need it to work with hard coded images but I keep getting this js error $("#slider").nivoSlider is not a function.
Nivo slider is included and the path is working to the file as is jquery version 1.7.1. Both paths to files are working so all the necessary js is included. I'll paste the whole header below after render in the browser. The filepaths are local so won't be accesible externally
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage GPSite
* @since Starkers 3.0
*/
global $theme_shortname;
global $mm;
$mm = get_option($theme_shortname."_maintenance_mode");
// If maintenance mode is on and we're not on the homepage, then redirect to the homepage
if($mm && !is_front_page() && !current_user_can('level_10')) {
//wp_redirect( get_bloginfo("url") );
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( ' ', true, 'right' ); ?></title>
<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-114.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-72.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-64.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-64.png">
<!-- For everything else -->
<link rel="shortcut icon" href="<?php bloginfo("template_url"); ?>/images/favicon.ico">
<?php
if(class_exists("MultiPostThumbnails") && (is_single() || is_page()))
{
if(MultiPostThumbnails::has_post_thumbnail($post->post_type, 'secondary-image'))
{
$thumbnail = wp_get_attachment_image_src ( MultiPostThumbnails::get_post_thumbnail_id ($post->post_type, "secondary-image", $post->ID ),array(1024,9999));
?>
<style type="text/css">
#top
{
background-image: url("<?php print $thumbnail[0];?>") !important;
background-position: 50% 0;
background-repeat: no-repeat;
}
</style>
<?php
}
}
?>
<?php
/*
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link type="text/css" rel="stylesheet" media="print" href="<?php print get_bloginfo("template_url")."/css/print.css"; ?>" />
* */
if($_COOKIE['high_contrast'])
{
?>
<link id="high-contrast-stylesheet" type="text/css" title="high-contrast" rel="stylesheet" href="<?php print get_bloginfo("template_url")."/css/high-contrast.css"; ?>" >
<?php
}
?>
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">
<!-- For all browsers -->
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="stylesheet" media="print" href="<?php bloginfo("template_url"); ?>/css/print.css">
<!-- For progressively larger displays -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/css/992.css">
<?php
/* WHEN RESPOND IS WORKING USE THIS
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="<?php bloginfo("template_url"); ?>/css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="<?php bloginfo("template_url"); ?>/css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="<?php bloginfo("template_url"); ?>/css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="<?php bloginfo("template_url"); ?>/css/992.css">
*/
?>
<?php
/*
* <!-- For Retina displays -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="css/2x.css">
*/
?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/modernizr-1.5.min.js"></script>
<?php wp_enqueue_script("jquery"); ?>
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:5000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3…
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
captionOpacity:0.8 //Universal caption opacity
});
});
</script>
</head>
<!--[if lt IE 7 ]> <body <?php body_class("ltie7"); ?>> <![endif]-->
<!--[if IE 7 ]> <body <?php body_class("ie7"); ?>> <![endif]-->
<!--[if IE 8 ]> <body <?php body_class("ie8"); ?>> <![endif]-->
<!--[if IE 9 ]> <body <?php body_class("ie9"); ?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body <?php body_class(); ?>> <!--<![endif]-->
<!--<div class="push">-->
<div class="wrapper">
<header id="top">
<div class="inner">
<div id="slider" class="nivoSlider">
<img src="http://192.168.200.74/~wadem/gpsite/slide.png" alt="Slide 1" width="957" height="280" />
<img src="images/slide2.jpg" alt="" />
</div>
There were 2 versions of jquery installed on the page conflicting with each other. The first thing to pick this up was nivo slider. An old developer left in a legacy version in the footer meaning jquery was running from $ and jQuery which apparently nivoslider really doesnt like.
Totally stupid I cant jsut answer the questions myself. Juset end up with more questions on my account unanswered. Sort it out
