WordPress的JS衝突（？） - PrettyPhoto，jQuery

我一直在努力解決這個問題整個下午瘋狂，但我想我只是不知道足夠的Javascript來看看該怎麼做。通讀大量的帖子，包括這裏，但我仍然無法弄清楚該怎麼做。WordPress的JS衝突（？） - PrettyPhoto，jQuery

我目前使用的是我從設計師處購買的Wordpress主題，此後主題消失，並且未回覆有關主題的任何消息。

在這個主題上，我已經使用了一年多的簡單優雅的「PrettyPhoto」燈箱插件（http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/）。

一切都很好，但今天我突然發現，「燈箱」效果現在取消：現在每張照片都在主頁面下打開，而不是在浮動窗口中彈出 - 而且看起來確實如此，真的很難看（請看這裏的例子）。

從我的理解可能是在我的主題內發生的一種JavaScript衝突，但我不能把它放在手指上。我的JS目錄中有一個jQuery 1.8.2文件，但用1.9.1版替換它並沒有帶來任何好處。

螢火蟲給我下面的JS錯誤：

TypeError: $ is not a function   $('#navigation ul.menu').supersubs({    - seso.js (line 2) 
Error: Permission denied to access property 'toString' 
TypeError: $ is not a function   $('#navigation ul.menu').supersubs({              - seso.js (line 2)

「Seso.js」是隨我的主題（名爲「SESO」）的文件，且其代碼如下：

jQuery(document).ready(function() { 
    $('#navigation ul.menu').supersubs({ 
      minWidth: 15, 
      maxWidth: 30, 
      extraWidth: 1  
     }).superfish({ hoverClass: "sfHover", speed: 'slow', dropShadows: false, delay: 0, animation: {height:'show'}}); 
    $('.up a[href$="top"]').click(function() { 
     $.scrollTo($('#top'), {speed:1200}); 
    }) 
    $('#navigation ul.menu>li>ul>li, #navigation ul.menu>li>ul>li>ul>li').hover(function() { //mouse in 
     $(this).stop().animate({ paddingLeft: '5px' }, 300); 
    }, function() { //mouse out 
    $(this).stop().animate({ paddingLeft: 0 }, 300); 
    }); 
    $(".socialtip").tipTip(); 
    jQuery(".toggle_body").hide(); 

    jQuery("h4.toggle").toggle(function(){ 
     jQuery(this).addClass("toggle_active"); 
     }, function() { 
     jQuery(this).removeClass("toggle_active"); 
    }); 

    jQuery("h4.toggle").click(function(){ 
     jQuery(this).next(".toggle_body").slideToggle(); 

    }); 
    $("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook',slideshow:5000}); 
    var enable_image_hover = function(image){ 
     if(image.is(".portfolio")){ 
      if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7) {} else { 
       if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 9) { 
        image.hover(function(){ 
         jQuery(".image_overlay",this).css("visibility", "visible"); 
        },function(){ 
         jQuery(".image_overlay",this).css("visibility", "hidden"); 
        }).children('img').after('<span class="image_overlay"></span>'); 
       }else{ 
        image.hover(function(){ 
         jQuery(".image_overlay",this).animate({ 
          opacity: '1' 
         },"fast"); 
        },function(){ 
         jQuery(".image_overlay",this).animate({ 
          opacity: '0' 
         },"fast"); 
        }).children('img').after(jQuery('<span class="image_overlay"></span>').css({opacity: '0',visibility:'visible'})); 
       } 
      } 
     }  
    } 

    $('.portfolio').preloader({ 
     delay:200, 
     imgSelector:'.imgbg img', 
     beforeShow:function(){ 
      $(this).closest('.image_frame').addClass('preloading'); 
     }, 
     afterShow:function(){ 
      var image = jQuery(this).closest('.image_frame').removeClass('preloading').children("a"); 
      enable_image_hover(image); 
     } 
    }); 
    $('.post').preloader({ 
     delay:100, 
     imgSelector:'.postimage img', 
     beforeShow:function(){ 
      $(this).closest('.postimage').addClass('preloading'); 
     }, 
     afterShow:function(){ 
      var image = jQuery(this).closest('.postimage').removeClass('preloading'); 
     } 
    }); 
}); 
(function($) { 

    $.fn.preloader = function(options) { 
     var settings = $.extend({}, $.fn.preloader.defaults, options); 


     return this.each(function() { 
      settings.beforeShowAll.call(this); 
      var imageHolder = $(this); 

      var images = imageHolder.find(settings.imgSelector).css({opacity:0, visibility:'hidden'}); 
      var count = images.length; 
      var showImage = function(image,imageHolder){ 
       if(image.data.source != undefined){ 
        imageHolder = image.data.holder; 
        image = image.data.source; 
       }; 

       count --; 
       if(settings.delay <= 0){ 
        image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)}); 
       } 
       if(count == 0){ 
        imageHolder.removeData('count'); 
        if(settings.delay <= 0){ 
         settings.afterShowAll.call(this); 
        }else{ 
         if(settings.gradualDelay){ 
          images.each(function(i,e){ 
           var image = $(this); 
           setTimeout(function(){ 
            image.css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)}); 
           },settings.delay*(i+1)); 
          }); 
          setTimeout(function(){settings.afterShowAll.call(imageHolder[0])}, settings.delay*images.length+settings.animSpeed); 
         }else{ 
          setTimeout(function(){ 
           images.each(function(i,e){ 
            $(this).css('visibility','visible').animate({opacity:1}, settings.animSpeed, function(){settings.afterShow.call(this)}); 
           }); 
           setTimeout(function(){settings.afterShowAll.call(imageHolder[0])}, settings.animSpeed); 
          }, settings.delay); 
         } 
        } 
       } 
      }; 


      images.each(function(i){ 
       settings.beforeShow.call(this); 

       image = $(this); 

       if(this.complete==true){ 
        showImage(image,imageHolder); 
       }else{ 
        image.bind('error load',{source:image,holder:imageHolder}, showImage); 
        if($.browser.opera){ 
         image.trigger("load");//for hidden image 
        } 
       } 
      }); 
     }); 
    }; 


    //Default settings 
    $.fn.preloader.defaults = { 
     delay:1000, 
     gradualDelay:true, 
     imgSelector:'img', 
     animSpeed:500, 
     beforeShowAll: function(){}, 
     beforeShow: function(){}, 
     afterShow: function(){}, 
     afterShowAll: function(){} 
    }; 
})(jQuery);

我沒有建立這個JS文件，所以我不知道它的所有功能是什麼。我很確定我不需要其中的90％。

爲了完整起見，這裏是我當前的WP的header.php頭標記的內容：

<head> 
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" /> 
<title><?php if (is_front_page()) { ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?><?php } else { ?><?php wp_title($sep = ''); ?> - <?php bloginfo('name'); ?><?php } ?></title> 

<link rel="stylesheet" href="<?php echo $themePath ?>/css/style.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> 
<link rel="stylesheet" href="<?php echo $themePath ?>/css/imageflow.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="<?php echo $themePath ?>/css/options.php" type="text/css" media="screen" /> 
<?php if(get_option_tree ('customcss', '')){ ?> 
<style type="text/css"> 
<?php echo get_option_tree ('customcss', ''); ?> 
</style> 
<?php } ?> 
<?php wp_head(); ?> 
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto({ 
    animationSpeed: 'normal', /* fast/slow/normal */ 
    padding: 40, /* padding for each side of the picture */ 
    opacity: 0.35, /* Value betwee 0 and 1 */ 
    showTitle: true, /* true/false */ 
    theme: 'pp_default' /* light_rounded/dark_rounded/light_square/dark_square/facebook */  
    }); 

}) 

</script> 
</head>

我使用其他插件燈箱嘗試，但結果是一樣的。

最奇怪的是，PrettyPhoto沒有我的本地服務器上的工作 - 我的網站是，後者是WordPress的較新版本的本地和在線版本之間的主要區別...

有一些我的主題裏面深深的JS衝突，但我找不到它的來源。如果任何人有線索，所有的幫助將不勝感激！

乾杯， D-

來源

2013-04-23 killer_rabbit

爲什麼這個文件混合使用'$（）'和'jQuery（）'？選擇一個，並與它一起去，聽起來像問題是由其他接管'$'字符引起的。 – Chad 2013-04-23 13:38:39

[Wordpress Jquery Confliction with Plugin]可能重複（http://stackoverflow.com/questions/4845483/wordpress-jquery-confliction-with-plugin） – undefined 2013-04-23 13:39:45

你可以試試'jQuery（document）.ready（function（$） {$（「doAnything」）;}）;'。這也在[文檔]（http://api.jquery.com/ready/）中描述。 – Eich 2013-04-23 13:42:57

的JavaSript錯誤是告訴你到底是什麼問題 - TypeError: $ is not a function ，所以腳本失敗。

在WordPress中，你需要使用jQuery，而不是$，所以你的代碼

jQuery('#navigation ul.menu')

更換

$('#navigation ul.menu')

，並在其他功能類似的替代呼叫在使用$。

這是爲什麼？jQuery通常定義$函數，但爲了防止與其他庫使用$衝突，它可以在.noconflict()模式下運行。

從another plugin's文檔

The jQuery library included with WordPress is set to the noConflict() mode (see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems with other JavaScript libraries that WordPress can link

也可參閱wordpress.stackexchange.com答案。

來源

2013-04-23 13:40:47 andyb

WordPress的JS衝突（？） - PrettyPhoto，jQuery

回答

相關問題