Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
See: wp_enqueue_script –  Mark Duncan Oct 11 '11 at 5:34
add comment

1 Answer 1

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($))

share|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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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