Hello.
There is a bug with some code in js

This is original library code.
$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');

And this thing: background-image:url(\".\") gives for us 404 errors on node pages. Even 404 does not occures this code causes 1 request to load content from the above level relative to page path :)

So this is not good. :)

May be better way determine 1pixel background of this thing using CSS?

PS. We are going patch our code for now but want this fix in library and your module. Thanks a lot.

Comments

ilya1st’s picture

Here is solution for 404 errors. just use base64 for images.

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

Hope module author will patch the library in it's next versions.

miccelito’s picture

That solved same error "Failed to load resource: the server responded with a status of 404 (Not Found)" in 6.x-1.0 version as well. (I didn't see the error in FF but only in Chrome.)

summit’s picture

David Stosik’s picture

Title: 404 bug » Mouse trap bakground image produces 404
Version: 6.x-1.x-dev » 7.x-1.x-dev
Component: External Cloud Zoom Files » Code

Hello,

This bug is still reproduced using latest dev version for Drupal 7 (7.x-1.1+1-dev), when Javascript aggregation is enabled.
Cloud Zoom library's JavaScript gets blank.png from the same folder containing the JS library (which may be sites/all/libraries/cloud-zoom , or profiles/commerce_kickstart/libraries/cloud-zoom if you run Commerce Kickstart), but when Javascript aggregation is enabled, the JS code is loaded from sites/default/files/js (for example), where the blank.png is not.
Which gets a lot of "Page not found" logs for "sites/default/files/js/blank.png".

Regards,
David

dydave’s picture

Hi David Stosik,

Thanks very much for your post and feedback.

I've been trying to let others know about this exact same problem already a few weeks ago, see:
#1825418-5: Cloud Zoom JQuery Plugin causes 404 missing page errors when JS is aggregated

Unfortunately, I didn't get any reply on that, so as a temporary quick/dirty fix, I ended up copying the blank.png file to the exact location it is mistakenly (I assume) being requested: sites/default/files/js/blank.png (as you kindly pointed out).

The error, of course disappeared from the logs after that, but I kept this issue in mind until we could find a proper way to resolve it.

I haven't tried the fix suggested by Ilya1st at #1 or Summit's at #3, trying to replace the image with a base64 inline image instance, but I would greatly appreciate to hear if anybody else would be able to come up with an appropriate way to fix this issue (or would have successfully tested the suggested fix).

Please let me know if you would need any more information on the contexts this problem would be encountered, I would surely be glad to explain in more details.

Thanks to all in advance for your feedback, testing and comments.
Cheers!

David Stosik’s picture

Didn't try the base64 inline image fix, but I'm pretty sure it works.

dydave’s picture

Thanks very much for your prompt reply.

I would greatly appreciate to get your detailed feedback on this, if you are able to try it.
I would surely give it a try when I have more time to look at this and we could then confirm that this would be the right way to fix it.
I would surely be glad to follow up afterwards on any kind of patch or document somewhere for others how this could be properly fixed.

Thanks again for your feedback and comments.
Cheers!

David Stosik’s picture

Sadly, it is not a way to fix it in Drupal, as the code change suggested goes into cloud-zoom external library, which moved on to a 2.x branch, free for non commercial sites only, and not tested with Drupal module.

dydave’s picture

Hi David Stosik,

Thanks again very much for your prompt reply.

Indeed, as you said, sadly is the right word, there's not much we could do.
The only solutions I would see would be:

  • Keeping a copy of blank.png at sites/default/files/js/blank.png, as I mentioned previously:

    I ended up copying the blank.png file to the exact location it is mistakenly (I assume) being requested: sites/default/files/js/blank.png (as you kindly pointed out).

  • Altering the JS code, as suggested by Summit at #3 and keeping a copy somewhere, see provided link: https://github.com/iAugur/Cloud-Zoom
  • Excluding the cloud_zoom library scripts from JS aggregation (which is certainly not ideal).

 

I think this is a very annoying problem since there's nothing we could do and in particular because cloud_zoom is part of the Commerce Kickstart distribution that we use on a very common basis.

On top of that, as you kindly pointed out, the fact that the Cloud Zoom library

moved on to a 2.x branch, free for non commercial sites only, and not tested with Drupal module

doesn't sound at all as bringing positive perspectives for the future evolution of the module.

I'm afraid we would have to start looking at alternatives and potentially turn ourselves towards using other Javascript libraries.

We might perhaps suggest adding a mention to this "unsolvable" problem on the project page or in a README.txt file, in a standard section called "Known Issues", to simply direct users to this ticket if they encounter the same error:
Page not found: sites/default/files/js/blank.png.
I'm thinking of my colleagues, for example, who would be working with Commerce Kickstart for their next projects: they will surely encounter this problem as well.

Feel free to let me know if you would have any questions, further comments or other recommendations/suggestions, it would certainly be highly appreciated.

In any case, thanks again very much for your feedback and follow-ups.
Cheers!

David Stosik’s picture

Thanks DYdave for your very complete post.
I linked to here in #1825418: Cloud Zoom JQuery Plugin causes 404 missing page errors when JS is aggregated so that Commerce Kickstart developers and Cloud Zoom developers can join forces.

David

jantoine’s picture

Issue summary: View changes
StatusFileSize
new14.94 KB

Here is a patch for the cloud zoom 1.0.3 library that combines the fixes in #1 and #3. This patch is to be applied to the cloud zoom library directory.

lsolesen’s picture

A good case for moving to another fork #2193489: Change library source to github fork

lsolesen’s picture

Priority: Critical » Major
annrockio’s picture

In case this helps someone else, the JS from the Cloud Zoom Library can be overridden using hook_js_alter() in a custom module. I didn't want to patch the library and have to keep this in mind when updating the commerce_kickstart profile so I used this solution instead.

First copy the forked version of cloud-zoom to your custom module's directory (from #3).

Then in mymodule.module do something like:

function mymodule_js_alter(&$javascript) {
  if (isset($javascript[libraries_get_path('cloud-zoom') . '/cloud-zoom.1.0.3.min.js'])) {
    $javascript[libraries_get_path('cloud-zoom') . '/cloud-zoom.1.0.3.min.js']['data'] = drupal_get_path('module', 'mymodule') . '/Cloud-Zoom/cloud-zoom.1.0.3.min.js';
  }
}

see:
http://drupal.stackexchange.com/questions/48643/how-to-override-jquery-from-contrib-module

and

http://www.drupalcontrib.org/api/drupal/contributions!libraries!libraries.module/function/libraries_get_path/7