2012-02-28 7 views
0

私はwordpressテンプレートページに含めるjavascriptに問題があります。私がやろうとしている何wordpressのjavascriptを含む

: - http://www.pcworld.ro/vworker/ - をこのページでは私がフェードインします/アウト6イメージJavaScriptを呼び出したい(あなたは、ヘッダーの右上にある最初の画像を見ることができます) 。

これはスクリプトです:http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js

は、これは私が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> 

これは私がの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'); 
?> 

そして、これhomepage.phpのjavascriptの責任を負うべきコードです(ワードプレステンプレートページでは、JavaScriptが必要です):

<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> 

私は初心者ですが、ジャバスクリプトが含まれている場合は、ワードプレスと絶対的なnoobになります。私が間違っていることを私に説明してそれを修正してもらえますか?

答えて

2

これはWordPressのテーマ開発者に共通していて、他のライブラリとの衝突を避けるために、自動的にjQuery.noConflict()をjqueryファイルに含めます。
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

いくつかの選択肢:

jQuery.noConflict();テキストjQueryですべてのコードで$を置き換え - または - jqueryのファイルの底からを削除します。あなたが使用してプラグインファイルは、その中$を使用することができますすぐに引数として$

jQuery(document).ready(
function($){ 
    //......... 
} 

- または -

変更

$(document).ready(
function(){ 
    //......... 
} 

を絶縁し、OKですしなければなりません

関連する問題