I have a jquery conflict with one of the websites I administrate. reffering to this link:( http://www.terraworldltd.com/pc/business/2056.html ), the product page consist of fancy zoom that when the picture is clicked on, the picture zooms out. The calling for the jquery is done on the single.php for the product. This is the code:
<?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>
I recently installed couple of plugins that use jquery, but it does not work on the product page. When I remove:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/jquery.js"></script>
from the code above, the plugins start to wok but the fancyzoom stops working.
I have tried every solution I found on google, but none of them worked. Including the no conflict and changing '$' to 'j' in the jquery. I really appreciate if if someone can help me.
