Home/ Questions/Q 6980279
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T17:59:43+00:00

I am using a 3rd party script to add a zoom function to images

  • 0

I am using a 3rd party script to add a zoom function to images on a page. This works quite well with static, but not with dynamic content.

Static version, works:

$(document).ready(function(){ 
    $('#gallery_main_img').addpowerzoom();
})

Dynamic version, doesn’t work:

$(document).ready(function(){ 
    $('#gallery_main_img').load(OnGalleryImageChanged);
})

function OnGalleryImageChanged() {
    $('#gallery_main_img').addpowerzoom();
}

The addpowerzoom function is created with this code in the PowerZoom script, which is referenced in the <head> of my page:

$.fn.addpowerzoom=function(options){ 
    // function content here
}

When entering the event handler, Firebug gives me this error message:
$("#gallery_main_img").addpowerzoom is not a function.

So it seems to be a scope problem. My question is:

How do I access the addpowerzoom() function from within my event handler?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you check that 3rd party script’s source, the first thing you’ll notice it do is set jQuery in noConflict mode, with the code jQuery.noConflict() and it doesn’t assign it to a variable either, meaning the $ isn’t reserved for jQuery anymore.

    As you mentioned that the first case is working, I am presuming that you have the ready statement before you include the 3rd party script, because otherwise that wouldn’t work either.

    You could either change your code to this (replacing $ with jQuery):

    jQuery(document).ready(function(){ 
    jQuery('#gallery_main_img').load(OnGalleryImageChanged);
})

function OnGalleryImageChanged() {
    jQuery('#gallery_main_img').addpowerzoom();
}

    example: http://jsfiddle.net/niklasvh/8Vjnu/

    or wrap the code inside of a:

    (function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

    or perhaps remove the noConflict from the 3rd party script altogether (something that the author should have never put in there in the first place, unless they assume that everyone who use the script wants to remove jQuery from $).

    • 0