If Cloud Zoom content is loaded using AJAX the needed JS is not applied to this loaded content. This is due Cloud Zoom module doesn't use Drupal behaviors, that allow to attach JS behaviors to AHAX loaded content.

To workaround this, try this code in a JS file:

Drupal.behaviors.myThemeOrModule = function (context) {
  $('.cloud-zoom:not(cloud-zoom-processed), .cloud-zoom-gallery:not(cloud-zoom-processed)', context ).addClass('cloud-zoom-processed').CloudZoom();
}

Change myThemeOrModule to your module or theme name where JS file is included.

If maintainer wants a patch I can write it, but I'm not sure if this module is still maintained.

CommentFileSizeAuthor
#14 987218.14-cloud_zoom-ajax-process-alter-libraries.patch1001 bytesczigor
#11 987218.11-cloud_zoom-ajax-process-alter-libraries.patch1.29 KBmrfelton
#10 987218.10-cloud_zoom-ajax-process.patch1.34 KBmrfelton
#9 987218-cloud_zoom-ajax-process.patch987 bytesmrfelton
#7 cloud_zoom.zip352 bytesarbel
#3 cloud_zoom.drupal_behaviors.1.patch637 bytestunic
#3 cloud_zoom.txt315 bytestunic

Comments

nicholasthompson’s picture

nicholasthompson
Primary language English
commented

It is maintained - I just dont have much time on my hands :-)

Is this something I need to add to the module, or do you define it in a custom module where you provide the AJAX stuff?

tunic’s picture

tunic
he/him
Primary language Spanish
Location Madrid
commented

Sorry for thinking this module was unmaintained, this is a quick answer :)

That JS must be included in every page where a cloud zoom content might be loaded using AJAX. It's not important who includes it, Cloud Zoom module or a custom module or theme, but I think that Cloud Zoom is a good place. It can be added in hook_prepreocess_page function, for example.

The drawback is that a little overhead is added in every AJAX load, because the code that prepares Cloud Zoom elements is called every time content loaded. Anyway, I think it's a little overhead and it's nice to support Cloud Zoom content loadd using AJAX.

The code needs a check to avoid errors when CloudZoom is called with an empty jQuery object:

Drupal.behaviors.cloud_zoom = function (context) {  
  items = $('.cloud-zoom:not(cloud-zoom-processed), .cloud-zoom-gallery:not(.cloud-zoom-processed)', context);
  if (items.length) {
    items.addClass('cloud-zoom-processed').CloudZoom();
  }
}

Edit: Dot added in "[..]:not(.cloud-zoom-processed)[..]" to avoid adding elements with cloud-zoom-processed class.

tunic’s picture

tunic
he/him
Primary language Spanish
Location Madrid
commented
Version: 6.x-1.0 » 6.x-1.x-dev
Category: bug » feature
Status: Active » Needs review
Issue tags: +Ajax, +behaviors
StatusFileSize
new cloud_zoom.txt315 bytes
new cloud_zoom.drupal_behaviors.1.patch637 bytes

I've rolled a patch against current dev to accomplish this.

Apply the patch and add the attached cloud_zoom.txt file renamed to cloud_zoom.js to the module root directoy.

Patch only adds a hook_init function:

/**
 * Implementation of hook_init().
 */
function cloud_zoom_init() {
  // Add needed JS.
  drupal_add_js(drupal_get_path('module', 'cloud_zoom') . '/cloud_zoom.js');  
}
nicholasthompson’s picture

nicholasthompson
Primary language English
commented

Thanks - looks good.

Question: Do we need to add it on *every* page or could be do it only on used pages?

tunic’s picture

tunic
he/him
Primary language Spanish
Location Madrid
commented

The quick answer is yes, it has to be added to every page.

The long answer is that actually it's only needed on every page that has a Cloud Zoom content plus every page that may load Cloud Zoom content using AJAX. First case is easy to detect, every time the Cloud Zoom cck formatter is called rendering a page you know this JS must be inlcuded. But is not so easy with pages that may load Cloud Zoom content using AJAX, because potentially every page may load this kind of content using AJAX. I'm not sure if there's any way to check if Cloud Zoom content is being loaded in an AJAX call so you can send the JS code and the content. I guess is not an easy task, but I might be worng.

Anyway overhead should be very small: just a few lines of jQuery to be sent over the network (just 315 bytes) and an execution of a simple selector over .cloud-zoom class elements. If none is found nothing else is executed.

Of course it would be nice to include it only when needed, but as I've said I'm not sure if it's possible, and how to do it if yes.

arbel’s picture

arbel commented

I'm using the drupal 7 version, and I've tried everything here, and it all looks like it should work but it doesn't, has something changed in d7?

I"m using drupal commerce with attributes, every time I change the attribute selection for a product (A select list), drupal commerce load the new product information using ajax, but once a new image is loaded cloud zoom stops working. It looks like the function inside drupal.behaviors isn't called after the ajax loads....I tried sticking an alert("test"); inside the Drupal.behaviors.cloud_zoom = function (context) { } but it never gets fired.

I'd appreciate any help.

Idan

arbel’s picture

arbel commented
StatusFileSize
new cloud_zoom.zip352 bytes

Ok, solved the D7 issue, simply replace the js file with the attached one - the syntax chagned from

Drupal.behaviors.myThemeOrModule = function (context) {

to

Drupal.behaviors.myThemeOrModule = {
attach: function (context) {
...

I also had to change $() to jQuery() not sure why....

Will Igetit’s picture

Will Igetit commented

no sure this is the solution to my problem but it look like it.

Zoom cloud is performing well the first image of a gallery using slideshow(plus carousel), but not on the other.

Is it link to that ajax problem?
(and if so why was t working then on development configuration?)

Thanks a lot,

Will

mrfelton’s picture

mrfelton commented
Version: 6.x-1.x-dev » 7.x-1.x-dev
StatusFileSize
new 987218-cloud_zoom-ajax-process.patch987 bytes

Here is patch for D7. Bumping the issue version to D7, since new development should be taking place on that branch first, and then backported.

mrfelton’s picture

mrfelton commented
StatusFileSize
new 987218.10-cloud_zoom-ajax-process.patch1.34 KB

Here is one that should apply cleanly.

mrfelton’s picture

mrfelton commented
StatusFileSize
new 987218.11-cloud_zoom-ajax-process-alter-libraries.patch1.29 KB

And here is another copy of the patch that applies cleanly after applying the patch from #1353892: Support Libraries API for more flexible library location. This is a real pain, but I need to be able to apply both patches using drush make, and the only way its possible. If you are not applying that patch, then use the patch from #10 instead

jawi’s picture

jawi commented
Status: Closed (fixed) » Needs review
Issue tags: +Ajax, +behaviors

With the patch "1579380-cloud-zoom-all-settings-integration-with-libraries-7.patch" cloud zoom and it's function's work well on pages from different contenttypes. ( http://drupal.org/node/1579380#comment-6107788 )

I have a problem using cloud-zoom in views.
With the gallery function on, cloud-zoom doesn't show it's images in the catalog view of ubercart.

All suggestions are welcome!

http://jawi-online.nl

guguss’s picture

guguss commented

The #10 patch worked fine for me !

Thanks.

czigor’s picture

czigor commented
StatusFileSize
new 987218.14-cloud_zoom-ajax-process-alter-libraries.patch1001 bytes

This is the same as #11 except that js is not added in hook_init but in the theme function. For me it's working.

nicholasthompson’s picture

nicholasthompson
Primary language English
commented
Status: Needs review » Fixed

I have applied a variant of that patch to dev - processed classes are applied to items and there is a JS attach behaviour too.

Status: Fixed » Closed (fixed)
Issue tags: -Ajax, -behaviors

Automatically closed -- issue fixed for 2 weeks with no activity.

Status: Needs review » Closed (fixed)

Correcting issue status, see #2125263: Issue status not taken from last comment during D7 migration.