jQuery jScrollPane не отображается (Wordpress)

Question

Я пытаюсь использовать jScrollPane на моей собственной теме WordPress. Но он не появляется. я не знаю, что проблема ... я вижу только старый серый стандартный ScrollBar

functions.php

//Register jScrollPane 
/////////////////////////////////////////////////////////// 

add_action('wp_enqueue_scripts', 'jscrollpane_libs'); 
function jscrollpane_libs() 
{ 
    // Register each script, setting appropriate dependencies 
    wp_register_script('jscrollpane', get_template_directory_uri() . '/scroll/jquery.jscrollpane.min.js'); 
    wp_register_script('mousewheel', get_template_directory_uri() . '/scroll/jquery.mousewheel.js'); 

    // Register each style, setting appropriate dependencies 
    wp_register_style('jscrollcss', get_template_directory_uri() . '/scroll/jquery.jscrollpane.css'); 
} 

//Register jQuery 1.8 
/////////////////////////////////////////////////////////// 

wp_deregister_script('jquery'); 
if(!is_admin()) { 
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); 
    wp_enqueue_script('jquery'); 
} 

header.php

<script type="text/javascript"> 
     $(function() 
     { 
      $('.nivo-caption').jScrollPane(); 
     }); 
</script> 

Answer 1

вы звоните wp_enqueue_script() также в заголовке? Попробуйте заменить wp_register_script() на wp_enqueue_script() в файле functions.php, чтобы проверить, работает ли он.

Обновление: теперь кажется, что скрипты включены должным образом, возможно, проблема может заключаться в том, что содержимое в поле подписи является динамическим. В jScrollPane есть опция для reinitialize окна содержимого, после чего что-то изменилось. Возможно, ваш код будет похож на следующий.

$(function() { 
    var pane = $('.nivo-caption'); 
    pane.jScrollPane(); 
    var api = pane.data('jsp'); 
    $('.nivo-control').click(function(){ 
     api.reinitialise(); 
    }); 
}); 

Answer 2

Прежде всего, don't dequeue WordPress bundled jQuery.

В functions.php он должен идти, как:

add_action('wp_enqueue_scripts', 'jscrollpane_libs'); 

function jscrollpane_libs() 
{ 
    $js = get_template_directory_uri() . '/js'; 
    $css = get_template_directory_uri() . '/css'; 

    wp_register_script('jsp-lib', "$js/jquery.jscrollpane.min.js"); 
    wp_register_script('jsp-mouse', "$js/jquery.mousewheel.js"); 
    wp_register_script(
     'jsp-main', 
     "$js/demo.js", 
     array('jquery', 'jsp-lib', 'jsp-mouse'), // <--- Dependencies 
     false, 
     true // <--- In footer 
    ); 

    wp_register_style('jsp-css', "$css/jquery.jscrollpane.css"); 

    wp_enqueue_script('jsp-main'); 
    wp_enqueue_style('jsp-css'); 
} 

И файл demo.js:

jQuery(document).ready(function($) // <---- Proper enclosure to use in WordPress 
{ 
    $('.scroll-pane').jScrollPane(); 
}); 

И наш пост имеет этот HTML:

<div class="scroll-pane"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices 
     eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci 
     mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis 
     consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies 
     bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit 
     semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
     mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada 
     quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus 
     eu lacus semper viverra. 
    </p> 
</div>