how to rewrite this this inline javascript with jquery?

Question

I have the following markup with inline javascript and would like to change it to Jquery. Any help would be appreciated.

<a title="823557" href="/PhotoGallery.asp?ProductCode=471823557" id="product_photo_zoom_url">
<img border="0" onload="vZoom.add(this, '/v/vspfiles/photos/471823557-2.jpg');"
alt="823557"
src="/v/vspfiles/photos/471823557-2T.jpg" id="product_photo"></a>

I guess I would need to use this?

$(function(){
<---- somecode---->
});

Answer 1

$(function () {
   $("#product_photo").load(function (e) {
      vZoom.add(this, this.src.replace('T.', '.'));
   })
})();

If $ doesn't work for some reason, this should also work. I incorporated Kranu's advice since that library most likely only needs the DOM loaded as a prerequisite, rather than the load event:

jQuery(function ($) {
    $("#product_photo").each(function () { // in case there is more than one 
        vZoom.add(this, this.src.replace('T.', '.'));
    });
});

Answer 2

Note that there is no need to put a separate bind event on the img because the $(function() { }) waits until the body loads.

$(function(){
    vZoom.add(document.getElementById('product_photo'),'/v/vspfiles/photos/471823557-2.jpg');
});

Answer 3

Not exactly sure what you are trying to do, but essentially you would remove the image from the HTML and dynamically load it using JS. Once loaded, you would inject it in the DOM and set the onload event.

var jsImg = new Image();
jsImg.onload = function(){
  vZoom.add(this,'/v/vspfiles/photos/471823557-2.jpg');
  var img = document.createElement('IMG');
  img.setAttribute('id','product_photo');
  img.setAttribute('alt','823557');
  img.setAttribute('src','/v/vspfiles/photos/471823557-2T.jpg');
  img.style.border = 'none';
  //inject image now in the DOM whereever you want.
};
jsImg.src = '/v/vspfiles/photos/471823557-2T.jpg';