0

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.

2

WordPress jQuery automatically loads in noConflict mode with jQuery as the object ref. remove the hardcoded version of jQuery and try changing:

$(document).ready(function(){

to:

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

(note also the $ in function($))

| improve this answer | |
  • Thank you for the info. But that didn't change anything. Do you have any other solutions? – amir Oct 11 '11 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.