this.each and a callback function

[DigitalFuel]

Hi all

I am having trouble working out how to get this to work. I have a $this.each function that gets all the relavent .attr('href') and I do a replace on it. All this works fine.

When I do the replace is the item I want is not valid then I need it to stay the same else I get an error. Now to to this I am using function IsValidImageUrl(url). This works but because you cannot turn an asynchonous call into a synchronous one I need to make a callback.

But here is my problem all the bits work but I cannot get the code to work together because I am using a this.each and the call back. with the validation and I am really stuck. The code is below it is in it bit as I have tried eveything and am just not getting it. Can someone help or point me in the right direction.

Cheers Daniel

$this.each(function  {
     var myItem = jQuery(this)
     var myLarge = myItem.attr("href");
     myZoom = myLarge.replace('lrg', 'zoom')
     myItem.attr("href",myZoom);
     myItem.attr("rev",myLarge);
});
function myCallback(url, answer) {
          if (answer==false) {
          myItem.attr("href",myLarge);
          myItem.attr("rev",myLarge);
                              } else {
          myItem.attr("href",myZoom);
          myItem.attr("rev",myLarge);    
};
};
function IsValidImageUrl(url, callback) {
    var img = new Image();
          alert(myZoom);
          img.onerror = function() { callback(url, false); }
    img.onload =  function() { callback(url, true); }
    img.src = url 
};  
IsValidImageUrl(myZoom, myCallback);

[Liam Dilley]

Hi Daniel, Could you explain what your trying to achieve in terms of function of all this on your site?

Following it but want to know the reason because to me, What your trying to do as I read I can do in a couple of lines.

So I just want to see your headspace and goal so I can give you best response.

[DigitalFuel]

Hi Liam

Thank you for looking at this.

I am trying to take the reference for an image that I know in a product view and do a replace to get another image in tthe same location but that has a different name that I will use in a href for a java zoom in affect on a product page. But if the person has no zoom image in the location it locks up.

If there is a better way then great.

Cheers Daniel

[Liam Dilley · Accepted solution]

So you basically have large product layout and when you hover over the image there it does a zoom effect?

If so then you can have a big image for your zoom and for your large image by default use _path in the image tag with thumbnail paramater in the URL to make a smaller version of it outlined in the BC documentation online.

Many jQuery image zoom plugins will then work. Slight tweaks to that will work.

If your doing it on the list view then same thing applies with the _path as a link source to fetch.

[DigitalFuel]

Hi Liam

Thanks. I am using the poplets to populate the images in the large product view. I will look into and try the above. Sounds like a much better way with less images having to be created. I will let you know how I go.

Cheers Daniel

[DigitalFuel]

Thanks Liam

This worked great. Cheers Daniel

[Liam Dilley]

Sweet. All a lot simpler now?