Compatibilty with Views Slideshow

Interesting - I imagine this would be due to the slideshow removing a CSS class. I had a similar problem with JCarousel and FancyBox about a year ago.

I got cloud zoom to work nicely with views cycle. Although I have not tried with the fade transition, just the horizontal scrolling.

Hi,

I think the problem comes from this line in cloud-zoom.1.0.2.js (line 173)

$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');

When using views slideshow or views cycle width and height (%1 and %2) are correctly defined only for the first image and set to 0 for the others.

Since I'm not a developer, I didn't find a solution. Maybe someone has an idea ?

Exactlcy, the it comes from the class mousetrap. The issue is that all classes (but the first one) get wrong inline CSS :

From :
<div class="mousetrap" style="background-image: url(.); z-index: 999; position: absolute; width: 260px; height: 298px; left: 0px; top: 0px; cursor: move;"/>we get background-image: url(.); z-index: 999; position: absolute; width: 0px; height: 0px; left: 0px; top: 0px;

Width and height are 0! Therefore it cannot work : no tracking area...

Proof of concept and quick fix for certain cases :

.mousetrap{
height:181px !important;
width:260px !important;
}

This will override the inline css. You put the dimension of the images here, and it'll work for all images.

Of course this is a dirty fix, as the width/height are no longer dynamic (only work if all images are of the same size).

Question is, now : how to fix this more cleanly.

I also had some issues with mousetrap, luckily my images were all the same size. You can check out an example of cloud_zoom with views_cyclehere.

Michael,
your "here" link is wrong. It should probably read as "http://topchoicemedia.com/our-work/website-design"
I had a look at your example. REALLY NICE. Is it a secret how this effect is achieved?

Does anyone know how to get cloud zoom working with thumbnails that swap the main image?

Hi All,

After many long hours of trying to figure this out, including looking into Thumbnail Hover witin the Views Slideshow module, I used @eme's solution #4 to hard-code in the style.css of my theme the width and height of that "mousetrap" class.

.mousetrap {
height:27em !important;
width:29em !important;
}

I am using Cloud Zoom, with thumbnails that fade in and swap the main image.

Here is a sample product details page:
http://bit.ly/fFnc67 --- choose one of the product details pages (one that has multiple images) to see the swap / fade / zoom functionality.

As it is, this is what I am using:

Ubercart to handle the product display details page --- and not showing the product image itself on the product detail page, only in the catalog and cart pages.
(Content Type = Product)

I've added a new content type called "Product Detail Image"

I've used nodereference_url to associate unlimited product detail images to a specific product.

Used views_attach to display the product detail images specific to a product within that product details page.

Using views_slideshow (v2 with views 2) to have a fade-in effect with the thumbnails of the product detail images.

Using cloud_zoom for a zoom effect on the large product detail image.

Sorry for you but it seems it does not work (when you click on images, you go directly on the image.

I would say it is a javascript incompatibility...

But when you scroll over the thumbnail, the cloud zoom turns on. The click function is still there but the scroll--> zoom is what we were aiming for.

For info, it does work very well with Views slideshow thumbnailhover (I used it therefore).

subscribing

To use with any image size, don't hard-code absolute height and width, but use

.mousetrap{
height:100% !important;
width:100% !important;}

or directly in the source (cloud-zoom.1.0.2.min.js)

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

Work fine for me

Great fix thanks Jeremie Gobeil

This was definately not a bug and I believe it's covered by the current version gallery features.