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