include javascript in wordpress - php

Question

I'm having a problem with a javascript that I want to include in a wordpress template page.
What I'm trying to do:
On this page - http://www.pcworld.ro/vworker/ - I want to call a javascript that will fade-in/out 6 images (you can see the first image in the top right side of the header).
This is the script: http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js
This is what I have in header.php:
<?php wp_enqueue_script('innerfade', '/vworker/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));?>
<?php wp_head();?>
<script type="text/javascript">
$(document).ready(
function(){
$('ul#screenshots').innerfade({
speed: 1000,
timeout: 4000,
type: 'random',
containerheight: '259px'
});
});
</script>
This is what I have in functions.php:
<?php
function load_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('innerfade', '/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));
}
add_action('init', 'load_scripts');
?>
And this is the code that should be responsible for the javascript in homepage.php (the wordpress template page where I need the javascript to work):
<div id="screenshot" style="overflow:hidden;">
<ul class="innerfade" id="screenshots" style="list-style: none outside none; margin: 0pt; padding: 0pt; cursor: pointer; position: relative; height: 259px;" onclick="location.href='#'">
<li style="z-index: 6; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot1.jpg" alt="Room Booking System">
</li>
<li style="z-index: 5; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot2.jpg" alt="Complete Administration Panel">
</li>
<li style="z-index: 4; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot3.jpg" alt="Meeting Room Bookings">
</li>
<li style="z-index: 3; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot4.jpg" alt="View Statistics of All Room Bookings">
</li>
<li style="z-index: 2; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot5.jpg" alt="Including a Helpdesk System">
</li>
<li style="z-index: 1; position: absolute; display: list-item;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot6.jpg" alt="Intelligent Recurring Bookings">
</li>
</ul>
</div>
I'm a beginner when it comes to wordpress and an absolute noob when there's javascript involved. Could you please explain me what I'm doing wrong and to fix it?

Answer 1

This is common among wordpress theme developers, they automatically include jQuery.noConflict() in jquery file to avoid collision with other libraries.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Several choices:
Remove jQuery.noConflict(); from bottom of the jquery file
-or-
Replace $ in all your code with the text jQuery. The plugin files you use should be insulated and are OK
-or-
Change
$(document).ready(
function(){
//.........
}
to
jQuery(document).ready(
function($){
//.........
}
WIth $ as argument in ready you can use $ inside it