Manual install of nivoslider on wordpress not working

问题

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( '&nbsp;', 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

回答1:

回答2:

$("#slider").nivoSlider is not a function

is a typical jQuery error having to do with wrong script load order or a missing script.

The header code you posted is mostly irrelevant to us. Use Firebug with Firefox, or in Chrome or Safari or IE8, use the developer tools to see what's loading on your site and the JS errors.

Be sure you are correctly enqueuing jQuery and other scripts in functions.php and using wp_head in header.php. See http://codex.wordpress.org/Function_Reference/wp_enqueue_script

回答3:

The links given in the script is wrong i think. Also you didn't given the nivoslider style link. Put the below code in your header instead of the line you added.

<!-- Include the Nivo Slider CSS file -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/scripts/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<!-- Include the Nivo Slider JS file -->
<script src="<?php bloginfo("template_url"); ?>/js/nivoslider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

make sure the paths are correct. Hope this will work.

EDIT: Refer this link for Setting up the jQuery Nivo Slider

来源：https://stackoverflow.com/questions/10518228/manual-install-of-nivoslider-on-wordpress-not-working

标签

jquery

wordpress

nivo-slider