Have you read this? If not, it may offer some help:
http://codex.wordpress.org/Using_Javascript
No, but I have now.
I expect that I might use jquery and caroufredsel on several pages and therefore I’ve tried adding them using wp enqueue script. I’ve added the following code in my functions.php in the current theme.
function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
function carouFredSel-6.1.0() {
wp_deregister_script( 'caroufredsel' );
wp_register_script( 'caroufredsel', get_template_directory_uri() . '/caroufredsel/jquery.carouFredSel-6.1.0.js');
wp_enqueue_script( 'caroufredsel' );
}
add_action('wp_enqueue_scripts', 'carouFredSel-6.1.0');
The javascript code for the specific page I added to a seperate .js file and try loading that from the page code like this:
<script type="text/javascript" src="/wp-content/themes/twentyeleven/caroufredsel/caroufredsel.js"></script>
<script type="text/javascript">
<!--
caroufredsel();
//--></script>
As you can see from this page it still doesn’t work.
Have I misunderstood the use of javascript in WordPress, or have I just implemented it the wrong way?
I think that the issue that you have has to do with the code here –
http://cbo.dk/wp-content/themes/twentyeleven/caroufredsel/caroufredsel.js
When integrating jQuery in WordPress, you need to use :
jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});
here is more detailed info: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers
I’m sorry for yet another questtion, but I am not very familiar with javascript.. 🙂
I’ve tried adding the wrapper in the .js file.
Do I still “fire” the plugin with this command in the WP page? :
<script type="text/javascript" src="/wp-content/themes/twentyeleven/caroufredsel/caroufredsel.js"></script>
<script type="text/javascript">
<!--
carouFredSel();
//--></script>
I have it like this in wordpress and works (:
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script> <!-- Carrousel Javascript -->
<script>
jQuery(document).ready(function($) {
$("#foo").carouFredSel({
width: 976,
height: 322,
align: "left",
scroll: {
items:1,
},
auto: false,
next: "a.next2",
prev: "a.prev2"
});
});
</script>
This is all within the text box, right at the top, Always try to edit in HTML mode when adding code. (:
