WP主题jQuery与使用jQuery的插件冲突

时间:2011-10-10 作者:amir

我与我管理的一个网站发生jquery冲突。引用此链接:(http://www.terraworldltd.com/pc/business/2056.html ), 产品页面由奇特的缩放组成,当点击图片时,图片会缩小。对jquery的调用是在单节点上完成的。产品的php。代码如下:

<?php get_header(); ?>

<script> var closebutton=\'<?php bloginfo(\'template_directory\'); ?>/library/js/closebox.png\'; </script>

<script type="text/javascript" src="<?php bloginfo(\'template_directory\'); ?>/library/js/jquery.js"></script>

<script type="text/javascript" src="<?php bloginfo(\'template_directory\'); ?>/library/js/fancyzoom.js"></script>

<link href="<?php bloginfo(\'template_directory\'); ?>/library/css/thickbox.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

$(\'div.photo a\').fancyZoom({scaleImg: true, closeOnClick: true});

$(\'#medium_box_link\').fancyZoom({width:400, height:300});

$(\'#large_box_link\').fancyZoom();

$(\'#flash_box_link\').fancyZoom();

});

</script>

<script type="text/javascript">

$(document).ready(function(){

$(\'.hide\').hide();

$(\'body\').append(\'<div id="infoBacking"></div><div id="infoHolder" class="large"></div>\');

$(\'#infoBacking\').css({position:\'absolute\', left:0, top:0, display:\'none\', textAlign:\'center\', background:\'\', zIndex:\'600\'});

$(\'#infoHolder\').css({left:0, top:0, display:\'none\', textAlign:\'center\', zIndex:\'600\', position:\'absolute\'});

if($.browser.msie){$(\'#infoHolder\').css({position:\'absolute\'});}

$(\'.more\').mouseover(function() {$(this).css({textDecoration:\'none\'});} );

$(\'.more\').mouseout(function() {$(this).css({textDecoration:\'none\'});} );

$(\'.more\').click(function(){

if ($(\'.\' + $(this).attr("title")).length > 0) {

browserWindow()

getScrollXY()

if (height<totalY) { height=totalY; }

$(\'#infoBacking\').css({width: totalX + \'px\', height: height + \'px\', top:\'0px\', left:scrOfX + \'px\', opacity:0.85});

$(\'#infoHolder\').css({width: width + \'px\', top:scrOfY + 25 + \'px\', left:scrOfX + \'px\'});

source = $(this).attr("title");

$(\'#infoHolder\').html(\'<div id="info">\' + $(\'.\' + source).html() + \'<p class="clear"><span class="close">Close X</span></p></div>\');

$(\'#infoBacking\').css({display:\'block\'});

$(\'#infoHolder\').show();

$(\'#info\').fadeIn(\'slow\');

}

$(\'.close\').click(function(){

$(\'#infoBacking\').hide();

$(\'#infoHolder\').fadeOut(\'fast\');

});

});

/* find browser window size */

function browserWindow () {

width = 0

height = 0;

if (document.documentElement) {

width = document.documentElement.offsetWidth;

height = document.documentElement.offsetHeight;

} else if (window.innerWidth && window.innerHeight) {

width = window.innerWidth;

height = window.innerHeight;

}

return [width, height];

}

/* find total page height */

function getScrollXY() {

scrOfX = 0;

scrOfY = 0;

if( typeof( window.pageYOffset ) == \'number\' ) {

scrOfY = window.pageYOffset;

scrOfX = window.pageXOffset;

} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {

scrOfY = document.body.scrollTop;

scrOfX = document.body.scrollLeft;

} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {

scrOfY = document.documentElement.scrollTop;

scrOfX = document.documentElement.scrollLeft;

}

totalY = (window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null);

totalX = (window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null);

return [ scrOfX, scrOfY, totalY, totalX ];

}

return false;

});

</script>
我最近安装了几个使用jquery的插件,但它在产品页面上不起作用。当我删除时:

<script type="text/javascript" src="<?php bloginfo(\'template_directory\'); ?>/library/js/jquery.js"></script>
根据上面的代码,插件开始工作,但fancyzoom停止工作。

我已经尝试了在谷歌上找到的每一个解决方案,但没有一个奏效。在jquery中包括无冲突并将“$”更改为“j”。如果有人能帮助我,我真的很感激。

1 个回复
SO网友:Milo

WordPress jQuery在无冲突模式下自动加载jQuery 作为对象参考,请删除jQuery的硬编码版本并尝试更改:

$(document).ready(function(){
收件人:

jQuery(document).ready(function($){
(另请注意$ 在里面function($))

结束

相关推荐

在unctions.php中加载jQuery时出现问题

我正在尝试向我的Wordpress站点添加一些Jquery脚本,不幸的是,我无法将您链接到该站点,因为我正在本地工作。看起来Jquery文件和我创建的fancyboxStyle都在加载中,但其他所有js脚本都没有加载。functions.phpfunction my_init() { if (!is_admin()) { wp_deregister_script(\'jquery\'); wp_register_script( \'jquer