我与我管理的一个网站发生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”。如果有人能帮助我,我真的很感激。