The Commerce Detective: Cloud Zoom JQuery plugin 404 errors - A solution

If you have been enjoying the Drupal Commerce Kickstart demo of what Drupal Commerce can do you are likely to be greatly inspired to use the techniques showcased in this amazing product. However you may not yet have noticed that you are getting 404 errors on the product page. In this post I cover how to solve this issue.

We base our eCommerce sites on Drupal Commerce and Kickstart is a great show case of what Commerce can do. One thing we noticed when using the same JQuery plugin that Kickstart uses to zoom in on products is that it causes a regular 404 error. Kickstart uses the Cloud Zoom JQuery plugin (http://www.professorcloud.com) to allow users to zoom in to product images. It's a great plugin and we have used it a lot too. I tracked the errors down to a background image on a div used by Cloud Zoom to trap IE mouse movement. The Mousetrap Div has a background image that doesn't exist so we get 404 errors all the time.

$mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(".");
z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", 
sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');

Whilst the url(.) fools IE it also results in a 404 error- that is annoying. There are number of solutions to this I considered.

1. Some JQuery to replace the CSS -
   along the lines of $('.mousetrap').css("background-image", "url(/sites/default/files/blank.gif)");
   nice idea but may miss the dynamically created divs in some cases and may not trap all of the 404s
2. Use a blank.gif that we know exists e.g. background-image:url(\"" + scriptPath + "/blank.png\")" - in fact I have checked and the later version 1.0.3 does exactly that. But that means having to deploy the image too, or
3. Replace the blank gif with a base64 encoded 1x1 transparent gif inline. That way we fix the issue and reduce HTTP calls by one.

$mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url("%0");
z-index:999;position:absolute;width:%1px;height:%2px;left:%3px;top:%4px;\'></div>",
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
sImg.outerWidth(),sImg.outerHeight(),0,0)).find(':last');

I have provided the updated code on GitHub here - https://github.com/iAugur/Cloud-Zoom.

This fork puts an inline transparent 1x1 gif in the background so we it still works as a mousetrap but we don't get a 404 Transparent gif idea from here http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Another useful tool to encode your images for inline use can be found here: http://www.greywyvern.com/code/php/binary2base64

Version 1 of Cloud Zoom was free to use. There is a later version 2 that is not free. I have also looked at Star zoom which I may use as it provides some great new functions - I especially like the way point zoom - wow!